Rule ID: ace-nav-bypass-block

Check pages provide skip links or landmarks to bypass repeated navigation blocks

WCAG 2.0 (A) - WCAG 2.2 (A) 2.4.1: Bypass Blocks Blind Deafblind Legal Risk

What This Rule Checks

To make navigation easier, particularly for keyboard and screen reader users, web pages should allow users to bypass repetitive sections, like headers and navigation bars, and quickly access the main content. This is typically achieved using landmarks like the main element.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.

Why This Matters

Without bypass mechanisms, keyboard and screen reader users must Tab through every navigation link on every page load to reach the main content. On sites with extensive navigation, this can mean 50+ Tab presses before reaching any content. This violates WCAG 2.4.1 (Bypass Blocks).

How to Fix

Provide a “Skip to Content” Link: Add a visible and accessible “skip to content” link at the top of the page. This link allows users to bypass repetitive sections like headers or navigation and jump directly to the main content.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- No skip link or landmark regions -->
<body>
  <div class="header">
    <div class="nav">
      <!-- 20+ navigation links -->
    </div>
  </div>

  <div class="content">
    Main content here
  </div>
</body>

Copy

Correct Markup Solutions:

Code example

<!-- Skip link + semantic landmarks -->
<body>
  <a href="#main" class="skip-link">
    Skip to main content
  </a>

  <header>
    <nav aria-label="Primary">
      <!-- navigation links -->
    </nav>
  </header>

  <main id="main" tabindex="-1">
    Main content here
  </main>
</body>

<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
  }

  .skip-link:focus {
    top: 0;
    z-index: 100;
  }
</style>

Copy

Common Mistakes to Avoid

Adding a skip link that points to a non-focusable element (missing tabindex=”-1″ on target).
Hiding skip links permanently with display:none instead of positioning them off-screen.
Not using semantic HTML5 landmarks (<nav>, <main>, <header>, <footer>) as a complementary bypass mechanism.
Creating skip links that are visible but jump to the wrong location.

Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.

Related WCAG Criteria

2.4.1: Bypass Blocks