WCAG 2.2 Demo Suite

2.4.1 Level A Guideline 2.4 Navigable Added in WCAG 2.0 Partly detectable automatically

Bypass Blocks

A mechanism is available to bypass blocks of content repeated on multiple pages — typically a skip link, and supported by proper landmarks and headings.

Who this affects

Keyboard users who would otherwise Tab through 40 navigation links on every page. Screen reader users who would hear the same menu read out before every page's content.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.1

Open the failing example in a new tab

fail.html — the problem

<!-- FAILURE 1: no skip link. A keyboard user must Tab through all 12 navigation
     links on every single page before reaching the content.
     FAILURE 2: no landmarks - everything is a div, so a screen reader user
     cannot jump to "main" either.
     FAILURE 3: no headings structure to navigate by.
     All three bypass mechanisms are absent, so there is no way past the block. -->
<div class="navbar">
  <ul>
    <li><a href="#">Fiction</a></li><li><a href="#">Non-fiction</a></li>
    <li><a href="#">Poetry</a></li><li><a href="#">Children's</a></li>
    <li><a href="#">Rare books</a></li><li><a href="#">Second hand</a></li>
    <li><a href="#">Events</a></li><li><a href="#">Book clubs</a></li>
    <li><a href="#">Gift cards</a></li><li><a href="#">Our shops</a></li>
    <li><a href="#">Contact</a></li><li><a href="#">Account</a></li>
  </ul>
</div>

<div>
  <div style="font-size:1.5rem;font-weight:700">This week's staff pick</div>
  <p>Tidal Flats, by A. Marsh.</p>
  <p><a href="#">Read the review</a></p>
</div>

Meets 2.4.1

Open the passing example in a new tab

pass.html — the fix

<!-- FIX 1: a skip link as the first focusable element. It is moved off-screen
     with transform rather than display:none, because display:none and
     visibility:hidden remove it from the tab order entirely. It becomes
     visible on focus, which matters: a sighted keyboard user needs to see it. -->
<a class="skip" href="#main">Skip to main content</a>

<!-- FIX 2: real landmarks. A screen reader user can jump straight to the main
     landmark, or list all landmarks, without using the skip link at all. -->
<header>
  <nav class="navbar" aria-label="Main">
    <ul>
      <li><a href="#">Fiction</a></li><li><a href="#">Non-fiction</a></li>
      <li><a href="#">Poetry</a></li><li><a href="#">Children's</a></li>
      <li><a href="#">Rare books</a></li><li><a href="#">Second hand</a></li>
      <li><a href="#">Events</a></li><li><a href="#">Book clubs</a></li>
      <li><a href="#">Gift cards</a></li><li><a href="#">Our shops</a></li>
      <li><a href="#">Contact</a></li><li><a href="#">Account</a></li>
    </ul>
  </nav>
</header>

<!-- FIX 3: tabindex="-1" on the target. Without it, some browsers scroll to
     the element but leave focus behind in the navigation, so the next Tab
     press sends the user back to link two. This is the detail most skip-link
     implementations get wrong. -->
<main id="main" tabindex="-1">
  <!-- FIX 4: a real heading, so heading navigation is a third way past the block. -->
  <h1>This week's staff pick</h1>
  <p>Tidal Flats, by A. Marsh.</p>
  <p><a href="#">Read the review</a></p>
</main>

How to test it

Load the page and press Tab once. A skip link should appear, be visible when focused, and move focus to the main content so the next Tab lands inside it. Confirm main, nav, and header landmarks exist.

  • Automated

    Scanners check for a bypass mechanism and landmark structure, but not whether the skip link actually moves focus correctly.

    This demo's failure is not machine-detectable. axe returns bypass as "needs review" rather than a violation. It can see there is no skip link, no main landmark and no heading, but it will not assert the failure on its own - it hands the decision back to you. An automated report that only counts violations records this page as clean.

    Relevant axe rules:

    • bypass
    • skip-link
    • landmark-one-main
    • region

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification