WCAG 2.4.1: Bypass Blocks
A mechanism must be available to bypass blocks of content that are repeated on multiple pages, such as navigation menus. 'Skip to main content' links are the most common solution.
What is WCAG 2.4.1 Bypass Blocks?
WCAG 2.4.1 Bypass Blocks is a Level A web accessibility success criterion under the Operable principle. A mechanism must be available to bypass blocks of content that are repeated on multiple pages, such as navigation menus. 'Skip to main content' links are the most common solution. Common failures include no skip navigation link present and skip link that is permanently hidden (display:none) and not just visually hidden. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Press Tab on page load and check for a 'Skip to main content' link
- ✓ Verify the skip link targets the main content area correctly
- ✓ Check that the skip link becomes visible when focused
- ✓ Verify that ARIA landmarks (main, nav, aside) are properly used
- ✓ Test that the skip link works (focus moves to main content after activation)
Common Failures
- ✗ No skip navigation link present
- ✗ Skip link that is permanently hidden (display:none) and not just visually hidden
- ✗ Skip link that targets a non-existent ID
- ✗ Skip link that does not move focus to the target
- ✗ Missing ARIA landmarks or HTML5 semantic elements (main, nav)
✓ Good Example
<!-- Skip link (visible on focus) --> <a href="#main-content" class="skip-link" style="position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;"> Skip to main content </a> <!-- The skip-link becomes visible on :focus via CSS --> <nav aria-label="Main navigation">...</nav> <main id="main-content" tabindex="-1"> <!-- Page content --> </main>
The skip link is visually hidden but accessible to keyboard and screen reader users. It becomes visible on focus. The main element has an ID matching the skip link's href and tabindex='-1' for programmatic focus.
✗ Bad Example
<!-- No skip link at all --> <nav> <!-- 20 navigation links --> </nav> <div class="content"> <!-- Main content --> </div>
No skip navigation mechanism exists. Keyboard users must Tab through all 20+ navigation links on every page before reaching the main content.
Test Your Site for 2.4.1 Compliance
Use our free accessibility tools to check your website against WCAG 2.4.1.
Open Testing Tool