WCAG 2.4.1: Bypass Blocks
Sighted users glance past a site’s header and menu in an instant. Keyboard and screen reader users cannot — without help they must move through every logo, search box, and navigation link on every single page before they reach the content they came for. This criterion asks for one thing: a mechanism to jump straight past those repeated blocks.
The success criterion, in full
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Note the two key phrases. “Blocks of content that are repeated” means banners, navigation, sidebars — the chrome that wraps your unique content. “A mechanism is available” means you have latitude in how you provide it: a skip link, semantic landmark regions, or a proper heading structure all qualify.
Who this helps
Repeated blocks are pure overhead for anyone who moves through a page linearly rather than pointing at it. A bypass mechanism removes that overhead:
Keyboard-only users
People who navigate with Tab and cannot use a mouse would otherwise tab through every header and nav link on each page before reaching the content.
Screen reader users
Landmarks and headings let them jump over repeated regions, and a visible skip link is a familiar, fast route straight to the main content.
Switch and voice-control users
People using switch devices or voice commands issue one action per stop. Skipping 20 repeated links means 20 fewer switch hits or spoken commands per page.
Users with motor disabilities
Every unnecessary tab stop is a repeated physical action. Reducing them lowers fatigue and the chance of error for people with limited mobility.
Screen magnifier users
At high zoom the header can fill the screen. A bypass mechanism moves the viewport straight to the content instead of forcing a slow scroll past the chrome.
Everyone, incidentally
Clean landmark and heading structure that satisfies this criterion also improves general navigation, in-page search, and how assistive tools understand the page.
Three ways to satisfy it
The criterion asks only that a mechanism exists; it does not mandate a specific one. Three techniques each provide a valid bypass, and the strongest sites use them together:
- Skip links. A link — usually 'Skip to main content' — placed as the first focusable element, hidden until focused, that moves focus to the start of the content. This is the only technique that also helps sighted keyboard users who are not running a screen reader.
- Landmark regions. Semantic HTML5 elements (header, nav, main, aside, footer) or their ARIA roles let screen reader users jump directly to a region. A single <main> is the anchor point that most 'skip to content' behaviour relies on.
- Heading structure. A correct, hierarchical set of headings (one h1, then h2s and h3s) lets screen reader users navigate by heading and leap over repeated blocks to the first content heading.
A skip link alone helps keyboard users but does nothing for someone navigating by landmark; landmarks alone help screen reader users but leave sighted keyboard users tabbing through the menu. Because the audiences barely overlap, provide a visible-on-focus skip link and correct landmarks and headings. Getting the underlying structure right also satisfies 1.3.1 Info and Relationships.
Pass and fail examples
✓ Passes 2.4.1
- A skip link is the first focusable element, hidden off-screen and revealed on keyboard focus, pointing at a focusable
<main>. - The page uses
header,nav,main, andfooterlandmarks. - A logical heading structure lets a screen reader user jump to the first content heading.
- Activating the skip link both moves focus and scrolls the target into view.
✗ Fails 2.4.1
- No skip link, no landmarks, and a wall of
<div>s — users tab through the whole menu every page. - A skip link hidden with
display:none, so it never enters the tab order. - A skip link that never becomes visible on focus, leaving sighted keyboard users lost.
- A skip link pointing at a target that cannot receive focus, so activating it appears to do nothing.
Code examples
A skip link done right
The link must be the first focusable element and point at a target that can take focus. Give the target tabindex="-1" so the browser can move focus to it.
<!-- ✗ No bypass mechanism: keyboard users tab through
the entire header and nav on every page -->
<body>
<header>
<img src="logo.svg" alt="Acme">
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<!-- …20 more links… -->
</nav>
</header>
<div id="content">…</div>
</body>
<!-- ✓ A skip link is the first focusable element,
targeting the main landmark -->
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<img src="logo.svg" alt="Acme">
<nav aria-label="Primary">…</nav>
</header>
<main id="main" tabindex="-1">…</main>
</body>Hide it until focus, never with display:none
Position the link off-screen and slide it into view on :focus. Using display:none or visibility:hidden removes it from the tab order entirely.
/* Off-screen until focused, then slides into view.
Never use display:none — that removes it from the tab order. */
.skip-link {
position: absolute;
left: 8px;
top: -48px; /* hidden above the viewport */
z-index: 1000;
background: #000;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
text-decoration: none;
transition: top 0.2s ease-in;
}
.skip-link:focus {
top: 8px; /* revealed on keyboard focus */
outline: 2px solid #fff;
outline-offset: 2px;
}
/* The target must be able to receive programmatic focus */
main[tabindex="-1"]:focus {
outline: none;
}Landmarks and headings as a bypass
Even without a skip link, semantic regions and headings give screen reader users their own bypass routes. Label repeated regions so they are distinguishable.
<!-- ✓ Landmarks and headings give screen reader users
their own way to bypass the repeated blocks -->
<header>
<nav aria-label="Primary">…</nav>
</header>
<main>
<h1>Quarterly report</h1>
<section aria-labelledby="summary">
<h2 id="summary">Summary</h2>
…
</section>
</main>
<aside aria-label="Related links">…</aside>
<footer>…</footer>Interactive demo
Tab into the first box to reveal a working skip link, then use the buttons in the second box to compare how many tab stops it takes to reach the content with and without a bypass mechanism.
Try a real skip link
Click inside this box, then press Tab. Two skip links appear at the top-left. Press Enter on one to jump straight past the repeated navigation to the content or nav landmark below.
Main content landmark
A skip link sends keyboard and screen reader users straight here, bypassing the navigation they have already heard on every other page.
Compare the tab journey
Press a button to watch each Tab stop. Notice how many stops the skip link saves.
Common failures
- No bypass mechanism at all — no skip link, no landmarks, and headings that do not organize the content.
- A skip link hidden with display:none or visibility:hidden, which drops it out of the tab order so no keyboard user can reach it.
- A skip link that stays invisible even on focus, so sighted keyboard users see focus vanish with no explanation.
- A skip link that is not the first focusable element, forcing users through some repeated content before they can skip the rest.
- A skip link whose target has no tabindex="-1", so focus never actually lands on the content and the link seems broken.
- Landmarks applied incorrectly — multiple unlabelled <nav> regions, or wrapping everything in a single generic region so nothing can be skipped to.
- A broken heading hierarchy (skipped levels, multiple h1s, headings used only for visual size) that defeats heading-based navigation.
- Skip link present on the homepage but missing on interior templates where the repeated navigation is just as long.
How to test for 2.4.1
- 1
Load the page and press Tab once
With focus at the very top of the page, the first Tab should reveal a skip link. If nothing visible appears and focus jumps into the navigation, the bypass mechanism is missing or hidden incorrectly.
- 2
Activate the skip link
Press Enter on the skip link and confirm that focus moves to the start of the main content and the content scrolls into view. Press Tab again — the next stop should be inside the content, not back in the menu.
- 3
Check the landmark structure
Use a screen reader's landmarks list (or a browser extension that outlines landmarks) and confirm there is a single main region plus clearly labelled header, nav, and footer regions you can jump between.
- 4
Navigate by heading
Open the screen reader's headings list. Verify there is one h1 and a logical hierarchy, and that you can jump straight from the top of the page to the first content heading, bypassing the repeated blocks.
- 5
Run an automated scan, then judge quality
Tools like axe DevTools, WAVE, and Lighthouse can flag a missing main landmark or an empty heading. They cannot confirm a skip link actually works, so always follow up with the manual keyboard checks above.
For a structured audit, work through the full WCAG 2.2 checklist.
Related Success Criteria
Web pages have titles that describe topic or purpose.
Focusable components receive focus in an order that preserves meaning.
The purpose of each link can be determined from link text or context.
More than one way is available to locate a page within a set of pages.
Headings and labels describe topic or purpose.
Frequently asked questions
What does WCAG 2.4.1 Bypass Blocks require?
It requires that a mechanism is available to bypass blocks of content that are repeated on multiple web pages. The classic example is a header and primary navigation that appear identically on every page: a keyboard or screen reader user should not have to move through all of it again on each page just to reach the main content. The most common mechanism is a 'skip to main content' link, but properly used HTML landmarks (such as a <main> region) and a correct heading structure also satisfy the criterion because they give assistive technology users a way to jump over the repeated blocks. It is a Level A success criterion, part of WCAG since 2.0.
Is a skip link the only way to satisfy 2.4.1?
No. A skip link is the most reliable and widely supported technique, but it is not the only one. The criterion is satisfied by any mechanism that lets users bypass repeated blocks. Semantic landmark regions (header, nav, main, aside, footer, or their ARIA role equivalents) let screen reader users jump directly to a region. A logical heading structure lets them navigate by heading. In practice a skip link helps sighted keyboard users who do not use a screen reader, so it is best to provide a skip link and correct landmarks and headings together, rather than relying on landmarks alone.
Does a skip link have to be visible?
It does not have to be visible at all times, but it must become visible when it receives keyboard focus. The common and accessible pattern is to position the link off-screen until it is focused, then bring it into view. Hiding it with display:none or visibility:hidden removes it from the tab order entirely and fails the criterion, because a keyboard user can never reach it. A permanently invisible skip link that never appears on focus is a frequent, subtle failure: screen reader users may find it, but sighted keyboard users are left confused when focus seems to disappear.
Where should the skip link go and where should it point?
The skip link should be the very first focusable element in the DOM, so it is the first thing a keyboard user reaches when they press Tab. Its target should be the start of the main content — typically the <main> element or the primary content container. To make the jump work reliably across browsers, give the target a tabindex of -1 so it can programmatically receive focus, and make sure activating the link both moves focus to the target and scrolls it into view. Pointing a skip link at a target that cannot receive focus is a common reason skip links appear to 'do nothing'.
How is 2.4.1 different from 2.4.2, 2.4.3, and 1.3.1?
They are related but distinct. 2.4.1 Bypass Blocks is specifically about skipping repeated blocks such as banners and navigation. 2.4.2 Page Titled is about the page having a descriptive title. 2.4.3 Focus Order is about focus moving through the page in an order that preserves meaning. 1.3.1 Info and Relationships underpins 2.4.1 when you use landmarks or headings as the bypass mechanism — the landmark and heading structure must actually be marked up in code for assistive technology to use it. So correct semantic structure supports 2.4.1, but 2.4.1 has the narrower, specific job of providing a way past repeated content.
Do single-page apps and sites with little repeated content still need this?
The requirement is triggered by blocks of content repeated across pages. If a page genuinely has no repeated blocks, the criterion does not apply to it. In practice almost every multi-page site has a repeated header and navigation, so a skip mechanism is expected. Single-page applications should treat each distinct view as a 'page': if the same navigation region wraps every view, provide a skip link and manage focus so that when the view changes, users can still bypass the repeated chrome and reach the new main content.