2.4.1 Bypass Blocks

What does it mean?

Most websites repeat the same header, navigation and sometimes sidebars on every page. A keyboard user would have to tab through all of these links on every single page before reaching the content. A screen reader user would hear them again and again.

A mechanism to bypass these blocks is required. The usual solutions are a "Skip to main content" link at the very start of the page and correct landmark regions (header, nav, main, footer) with headings, which screen readers can jump between. A skip link helps sighted keyboard users the most, so it is a good idea to provide both.

Who does it help?

• Keyboard users who would otherwise tab through every navigation link
• Screen reader users who want to jump straight to the content
• People with motor impairments, for whom every extra key press costs effort

Common failures

• No skip link and no main landmark, so the only way to the content is through the full navigation
• A skip link that points to an id that does not exist on the page
• A skip link that is hidden with display: none and therefore cannot receive focus
• The main content not wrapped in a main element, while the layout is built only with divs

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Is there a skip link or are landmarks/headings there to jump past repeated navigation?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<body>
  <div class="header">…40 navigation links…</div>
  <div class="content">…</div>
</body>

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>…<nav aria-label="Main">…</nav></header>
  <main id="main" tabindex="-1">…</main>
</body>

<style>
  .skip-link { position: absolute; transform: translateY(-120%); }
  .skip-link:focus { transform: none; }
</style>

The skip link is the first focusable element, appears when focused, and leads to the main landmark.

Practical tips

• Test it: press Tab once after loading the page; the skip link should appear and work with Enter.

Guides and patterns on this

• Getting there without a mouseMany people use the web without a mouse: with a keyboard, switches, voice control or a screen reader. Here is what has to work for them and how to manage focus properly in modern web apps.

Official source

Understanding WCAG 2.2 at the W3C: 2.4.1 Bypass Blocks