Level A
Operable
WCAG 2.0+
Success Criterion 2.4.1: Bypass Blocks
Official W3C Definition
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Why This Criterion Matters
Keyboard users and screen reader users must navigate through the entire page sequentially. On sites with consistent navigation, this means tabbing through the same header, navigation, and sidebars on every page before reaching the main content. Skip links allow users to jump directly to the content they want.
Common bypass mechanisms: Skip links, proper heading structure, ARIA landmarks, and page regions all help users bypass repeated content.
Who Benefits
Screen Reader Users
Can skip to main content instead of hearing nav on every page.
Keyboard Users
Can skip tabbing through dozens of navigation links.
Motor Disabilities
Reduces number of keystrokes needed to reach content.
Power Users
Efficient navigation enhances everyone's experience.
How to Meet This Criterion
Technique 1: Skip to Main Content Link
Good Example - Skip Link
<!-- First focusable element on page -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>
<nav>...navigation links...</nav>
</header>
<main id="main-content" tabindex="-1">
<h1>Page Title</h1>
<!-- Main page content -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px 16px;
background: #000;
color: #fff;
z-index: 1000;
}
.skip-link:focus {
top: 0;
}
</style>Technique 2: ARIA Landmarks
Good Example - Semantic Landmarks
<!-- Screen readers can navigate by landmarks -->
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
...
</nav>
</header>
<main role="main">
<!-- Primary content -->
</main>
<aside role="complementary" aria-label="Related information">
<!-- Sidebar content -->
</aside>
<footer role="contentinfo">
<!-- Footer content -->
</footer>Technique 3: Proper Heading Structure
Good Example - Navigable Headings
<!-- Screen reader users can navigate by headings -->
<h1>Page Title</h1>
<h2>First Major Section</h2>
<p>Content...</p>
<h3>Subsection</h3>
<p>Content...</p>
<h2>Second Major Section</h2>
<p>Content...</p>
Bad Examples
<!-- Bad: No skip link, no landmarks -->
<div class="header">
<div class="nav">
<!-- 50 navigation links -->
</div>
</div>
<div class="content">
<!-- User must tab through all 50 links first -->
</div>
<!-- Bad: Skip link that doesn't work -->
<a href="#main">Skip to content</a>
<!-- But no element with id="main" exists -->Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| No bypass mechanism at all | Users must tab through entire nav on every page | Add skip link and/or landmarks |
| Skip link target doesn't exist | Link does nothing | Ensure target ID matches skip link href |
| Skip link hidden with display:none | Never focusable by keyboard | Position off-screen, reveal on focus |
| Skip link not first focusable element | User tabs through items before reaching it | Place skip link at very top of page |
| Using only landmarks without skip link | Keyboard-only users may not know landmark navigation | Provide skip link in addition to landmarks |
Testing Methods
Manual Testing Steps
- Press Tab: First focusable element should be skip link
- Activate skip link: Press Enter - focus should move to main content
- Check landmarks: Use screen reader landmark navigation (D key in NVDA)
- Check headings: Navigate by headings (H key in NVDA/JAWS)
- Test on multiple pages: Verify consistency across site
Screen Reader Testing
- NVDA: Press D to navigate by landmarks, H for headings
- JAWS: Press R for regions, H for headings
- VoiceOver: Use rotor to navigate by landmarks or headings
Related Criteria
1.3.1 Info and Relationships
Proper semantic structure
2.4.3 Focus Order
Logical navigation sequence