WCAG 2.4.1 Bypass Blocks (level A) explained

What it asks for, in plain English

Every page on a site tends to start with the same things: logo, navigation, search, maybe a banner. A mouse user ignores all that and looks at the content. A keyboard or screen reader user has to pass through it, every page, every time, unless you give them a way to jump over it.

The usual ways are a 'skip to main content' link that is the first thing on the page, proper landmarks (a <main> element, <nav>, <header>) that screen readers can jump between, and a sensible heading structure that lets people jump straight to the first heading.

The skip link may be hidden until it receives keyboard focus, but it must then be visible and must actually move focus to the main content.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.1 page has the full intent, techniques and definitions.

Who it affects

Someone using a screen reader hears forty navigation links read out on every single page before reaching the article.

A keyboard user with limited mobility presses Tab forty times to reach the first form field, on each step of a form.

A person using switch access finds each extra Tab press is a real physical cost.

Example

Broken

<body>
  <div class="header">
    <img src="logo.svg" alt="Harbour Bakery">
    <div class="nav"><a href="/">Home</a> <a href="/breads">Breads</a> <a href="/cakes">Cakes</a> <a href="/orders">Orders</a></div>
  </div>
  <div class="content">
    <h1>Weekend bakes</h1>
  </div>
</body>

No skip link, no landmarks. The only way to the content is through every link in the header.

Fixed

<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header>
    <img src="logo.svg" alt="Harbour Bakery">
    <nav aria-label="Main"><a href="/">Home</a> <a href="/breads">Breads</a> <a href="/cakes">Cakes</a> <a href="/orders">Orders</a></nav>
  </header>
  <main id="main" tabindex="-1">
    <h1>Weekend bakes</h1>
  </main>
</body>

One Tab reveals the skip link, Enter jumps to the content. Screen readers can also jump to the main or nav landmark directly.

How to check it

Load the page and press Tab once. A 'skip to content' link should appear. Press Enter and check focus lands on the main content.
With a screen reader, list the landmarks (VoiceOver rotor, or D in NVDA). There should be a main landmark and the navigation should be a nav landmark.
List the headings. The main content should start with a heading you can jump to.
Check the skip link exists on every page, not just the home page.

What Websight checks for 2.4.1

Websight runs this automated check for 2.4.1:

A Give people a way to skip past repeated navigation bypass Most pages start with the same header and menu.

Websight's bypass check confirms the page has at least one of a skip link, a main landmark or a heading. It cannot tell whether the skip link works or lands somewhere sensible, so that is on the manual checklist.

Practical tips

Put the skip link first in the body and give the <main> element an id and tabindex="-1" so focus actually moves.
Hide the skip link off-screen, not with display: none, so it can receive focus and then appear.
Use <header>, <nav>, <main> and <footer> as the landmarks; they cost nothing.

2.4.2 Page Titled (level A)
2.4.3 Focus Order (level A)
2.4.4 Link Purpose (In Context) (level A)
2.4.5 Multiple Ways (level AA)
2.4.6 Headings and Labels (level AA)
2.4.7 Focus Visible (level AA)
2.4.11 Focus Not Obscured (Minimum) (level AA)

2.4.1 Bypass Blocks