Every web page typically contains repeated blocks of content: site-wide navigation menus, headers, sidebars, and footer links. For sighted mouse users, scrolling past these elements is trivial. For someone navigating with a keyboard alone, or listening to a page through a screen reader, wading through dozens of repeated links on every single page is exhausting and slow. Navigation and bypass mechanisms solve this problem by providing ways to jump directly to the content that matters.
WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks) requires that a mechanism exists to bypass blocks of content repeated across multiple pages. This is a Level A requirement, the baseline conformance level. Meeting it typically involves one or more of these techniques: skip navigation links, ARIA landmark roles, and a well structured heading hierarchy.
Why navigation and bypass mechanisms matter
Consider a site whose global navigation contains 40 links. A keyboard user who wants to read an article must press Tab 40 times on every page just to reach the main content. Screen reader users face a similar problem: the software reads every link aloud before reaching the article. Bypass mechanisms eliminate this friction.
People affected include keyboard-only users (whether due to motor disabilities, broken trackpads, or personal preference), screen reader users, switch device users, and voice control users. Without bypass mechanisms, these users spend disproportionate time and effort on repeated content, and in many cases they simply abandon the site.
Automated accessibility checkers flag pages that lack skip links or landmarks, and manual WCAG audits will fail a page at Level A if no bypass method is present.
How navigation and bypass mechanisms work
Skip navigation links
A skip link is an anchor link placed as the first focusable element in the page. It points to the id of the main content area. When a keyboard user presses Tab, the skip link receives focus, and pressing Enter jumps the focus past the navigation. Skip links are often visually hidden until they receive focus, so they do not disrupt the visual layout for mouse users.
Landmark roles
HTML5 sectioning elements like <header>, <nav>, <main>, and <footer> carry implicit ARIA landmark roles. Screen readers expose these landmarks through shortcut keys, allowing users to jump between regions without tabbing through every element. For example, NVDA users can press D to jump to the next landmark, and JAWS users can press R or use the landmarks list dialog.
Using semantic HTML elements is the simplest approach. If you use generic <div> elements instead, you can apply explicit roles like role="navigation" or role="main", but semantic elements are preferred because they carry the correct roles automatically.
Heading hierarchy
A logical heading structure (<h1> through <h6>) provides another bypass method. Screen reader users commonly navigate by headings: pressing H in NVDA or JAWS jumps to the next heading. If the page has a clear hierarchy with <h1> for the page title, <h2> for major sections, and <h3> for subsections, users can scan the page structure quickly.
Headings complement skip links and landmarks. A skip link gets the user to the main content; headings let them navigate within it.
Tab order
A logical tab order (set by the natural DOM order, not by tabindex hacks) ensures that after a user activates a skip link, subsequent Tab presses move through the main content in a predictable sequence. Setting positive tabindex values disrupts this expectation and should be avoided.
Code examples
The following example shows a page that lacks any bypass mechanism. A keyboard user must tab through every navigation link to reach the article.
<!-- Bad: no skip link, no landmarks, divs instead of semantic elements -->
<body>
<div class="header">
<div class="nav">
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/products">Products</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</div>
</div>
<div class="content">
<div class="title">Article Title</div>
<p>Article text goes here.</p>
</div>
</body>
This corrected version includes a skip link, semantic landmark elements, and a proper heading hierarchy.
<!-- Good: skip link, semantic landmarks, heading hierarchy -->
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
<nav aria-label="Main navigation">
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/products">Products</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="main-content">
<h1>Article Title</h1>
<p>Article text goes here.</p>
<h2>First section</h2>
<p>Details about the first section.</p>
<h2>Second section</h2>
<p>Details about the second section.</p>
</main>
<footer>
<p>Copyright 2024 Example Corp.</p>
</footer>
</body>
The CSS for the skip link keeps it off screen until it receives focus:
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
padding: 0.5em 1em;
background: #000;
color: #fff;
z-index: 1000;
}
A few things to note in the good example. The <nav> element has an aria-label so screen readers can distinguish it from other navigation regions if the page has more than one. The <main> element receives the skip link target through its id. Headings follow a logical order starting at <h1> and stepping down to <h2> without skipping levels.
When multiple <nav> elements exist on the same page (for example, a sidebar table of contents alongside the global menu), each one should have a distinct aria-label so users can tell them apart in the landmarks list.
Testing bypass mechanisms is straightforward. Unplug the mouse, reload the page, and press Tab. The first visible focus indicator should be the skip link. Pressing Enter should move focus to the main content region. Running a screen reader's landmarks list command should show clearly labeled regions. If any of these checks fail, the bypass mechanisms need attention.
Related terms
Help us improve this glossary term
Scan your site
Rocket Validator scans thousands of pages in seconds, detecting accessibility and HTML issues across your entire site.