Operable · Level A · 2.4.1
Bypass Blocks
There needs to be a way to skip past repeated blocks of content — a navigation menu, a header — to get straight to the main content, instead of being forced to step through the same block on every single page before reaching what's actually different about this one.
- Blind
- Low vision
- Motor
- Cognitive
How to recognize it
Tab into a page from the very top and count how many stops it takes before focus reaches the main content: if a full navigation menu with a dozen links sits between the start of the page and the actual article every single time, with no skip mechanism, that's the failure. Someone navigating sequentially by keyboard or by screen reader has to sit through that same block on every page of the site, which adds up to real, repeated effort with no shortcut. Screen magnifier users and people with cognitive limitations benefit the same way from a clearly marked, quick path to the main content instead of having to scan past the same furniture each time.
How to fix it
The most common fix is a 'skip to main content' link, positioned as the very first focusable element on the page, that jumps focus straight to the main content region when activated — it can be visually hidden until it receives keyboard focus. Marking up the page with proper landmark regions (`<nav>`, `<main>`, ARIA landmark roles) or a correct heading structure also satisfies this, since screen reader users can jump directly between landmarks or headings without needing an explicit skip link at all. Any one of these mechanisms is enough; they don't all need to coexist.
Example
Avoid
<body>
<nav><!-- a dozen links --></nav>
<main>...</main>
</body>
<!-- no skip link, no landmark roles, nothing that lets sequential navigation bypass the nav -->Prefer
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav><!-- a dozen links --></nav>
<main id="main-content">...</main>
</body>