2.4.1 Bypass Blocks

WCAG 2.2 · 2.4.1 A Operable

A mechanism is available to bypass blocks of content that are repeated on multiple web pages — such as a banner, primary navigation, or a row of advertisements — so that users can jump straight to the page's main content.

What it requires

When the same block of content appears across pages (site header, navigation menus, sidebars, ad regions), there must be a way to skip past it rather than wading through it on every page. Any one of these satisfies the criterion:

  • A skip link at the very top of the page that jumps to the main content.
  • ARIA landmarks or HTML5 sectioning elements (<header>, <nav>, <main>, <footer>) so assistive technology can navigate region to region.
  • A proper heading structure that lets users jump by heading.

The block only needs to be bypassable, not removable. A single working mechanism is enough.

  • Screen reader users who would otherwise hear the same dozens of links announced before the main content on every page.
  • Keyboard-only users (including switch and sip-and-puff users) who must tab through every repeated link to reach the content.
  • Screen magnifier users, for whom repeated regions consume the viewport.
  • Anyone with limited mobility or stamina for whom repeated, sequential navigation is costly.

How to detect it

Ways to check Bypass Blocks
Method What to do
Manual / source Confirm a skip link, or that <header>, <nav>, <main> landmarks wrap the repeated and main regions.
Keyboard Load the page and press Tab once — the first stop should reveal a visible "Skip to main content" link that moves focus into the main region when activated.
Screen reader List landmarks/regions (e.g. NVDA D, VoiceOver rotor) and confirm a main landmark exists and is reachable directly.
Zoom / magnify At high zoom, verify the skip link becomes visible on focus rather than staying clipped.
Automated (axe, etc.) Partial. Tools flag a missing main landmark or absent skip link, but cannot confirm a skip target actually moves focus — verify manually.

How to fix it

  1. Add a skip link as the first focusable element, targeting the main content's id.
  2. Give the target a matching id and tabindex="-1" so focus lands there.
  3. Keep the link visually hidden until focused, then clearly visible.
  4. Wrap regions in semantic landmarks (<header>, <nav>, <main>, <footer>) so AT users can also navigate by region.
  5. Test by tabbing once and by listing landmarks in a screen reader.
<a class="skip-link" href="#main">Skip to main content</a>
<header>…repeated banner and nav…</header>
<main id="main" tabindex="-1">
  <h1>Page title</h1>
</main>

Copy-paste tests

Automated coverage

The axe-core rule bypass flags failures of this criterion. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures, so manual review is still required.

Run this in the browser console

bypass-check.js 
// Read-only: surface bypass mechanisms for review
const skips = [...document.querySelectorAll('a[href^="#"]')]
  .filter(a => /skip|jump|main|content/i.test(a.textContent + a.getAttribute('href')));
const landmarks = document.querySelectorAll('main,[role="main"],nav,[role="navigation"],h1,h2');
console.log('Skip-link candidates:', skips.length);
console.table(skips.map(a => ({ text: a.textContent.trim(), href: a.getAttribute('href') })));
console.log('Landmarks/headings found:', landmarks.length);
skips.forEach(a => a.style.outline = '2px solid red');

What to check manually: Tab from the very top of the page and confirm a skip link actually appears and moves focus into the main content. Verify landmarks (<main>, <nav>) and headings reflect the real page structure, not just decoration.