Operable · 2.4 Navigable

Bypass Blocks WCAG 2.4.1 · Level A

A mechanism must be available to skip blocks of content that repeat across multiple pages, such as the header and navigation. Skip links, properly marked-up landmark regions and headings are common ways to meet it.

Level
A
Since
WCAG 2.0
Principle
Operable
Guideline
2.4 Navigable
Try the live demo Open the URL Analyzer Checklist

Live demo

Reach the flight search with the keyboard

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Tab to move into the demo and keep pressing it until the Flying from field has focus. In Passes, press Enter on the Skip to main content link when it appears.

Live example

Passes

Find a flight

What happened

    Why it passes

    The first Tab press shows a Skip to main content link. Pressing Enter on it moves focus past the eight header links, so the search field is reached after two Tab presses.

    Why it fails

    Nothing lets a keyboard user skip the header, so it takes nine Tab presses to reach the search field, and the same again on every page of the site.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes − "content" + "main-content" tabindex="-1"

    Fails

    Skip link points at a missing id

    Live preview

    HTML
    <a class="skip-link" href="#main-content">Skip to main content</a><header>  <nav aria-label="Main">    <a href="/flights">Flights</a> <a href="/hotels">Hotels</a> <a href="/deals">Deals</a>  </nav></header><main id="content">  <h1>Find a flight</h1></main>

    The link targets #main-content, but the main element's id is content. Activating the link goes nowhere, so keyboard users still have to tab through every navigation link.

    Passes

    Skip link that lands on the main content

    Live preview

    HTML
    <a class="skip-link" href="#main-content">Skip to main content</a><header>  <nav aria-label="Main">    <a href="/flights">Flights</a> <a href="/hotels">Hotels</a> <a href="/deals">Deals</a>  </nav></header><main id="main-content" tabindex="-1">  <h1>Find a flight</h1></main>

    The skip link is the first thing in the tab order and its target exists, so Tab and then Enter move past the navigation (technique G1). tabindex="-1" lets the main element take focus, so the next Tab continues from there.

    Passes

    Skip link that appears on focus

    Live preview

    CSS
    .skip-link {  position: absolute;  left: 1rem;  top: -4rem;}.skip-link:focus {  top: 1rem;  padding: 0.5rem 1rem;  background: #ffffff;  color: #1d4ed8;  outline: 3px solid #1d4ed8;}

    The link waits above the top edge and moves into view when it gets focus, so sighted keyboard users can see it. Hiding it with display: none instead would remove it from the tab order.

    02What changes 7 lines

    Fails

    Repeated menu with nothing to jump by

    Live preview

    HTML
    <div class="top">  <div class="menu">    <a href="/">Home</a> <a href="/flights">Flights</a> <a href="/hotels">Hotels</a>    <a href="/cars">Car hire</a> <a href="/deals">Deals</a> <a href="/help">Help</a>  </div></div><div class="page">  <div class="big-text">Find a flight</div></div>

    There is no skip link, no nav or main landmark and no heading, so neither keyboard users nor screen reader users have any way past the six links that repeat on every page.

    Passes

    Landmarks and a heading to jump to

    Live preview

    HTML
    <header>  <nav aria-label="Main">    <a href="/">Home</a> <a href="/flights">Flights</a> <a href="/hotels">Hotels</a>    <a href="/cars">Car hire</a> <a href="/deals">Deals</a> <a href="/help">Help</a>  </nav></header><main>  <h1>Find a flight</h1></main>

    Screen reader users can jump straight to the main landmark or the first heading (techniques ARIA11 and H69). A skip link is still worth adding, because browsers have no built-in key for moving between landmarks.

    Why it matters

    Who it helps

    Keyboard users can reach the main content without tabbing through every navigation link on every page, and screen reader users can jump past repeated blocks instead of hearing them each time.

    W3C: Understanding 2.4.1

    • Level A

      Level A is the minimum: failing it can shut some people out completely.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 12.1, 13.6

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Press Tab from the top of the page, find the skip link, activate it and confirm focus moves past the repeated content to the main content.
    2. Check that landmark regions such as main and navigation, or headings, mark where the main content and the repeated blocks begin.

    Common failures

    Where it breaks

    • A skip link points to an ID that does not exist on the page, so activating it does nothing.
    • Long repeated navigation has no skip link, no main landmark and no headings to jump by.

    On the Accessibility Checklist

    Related