Add a skip link as the first element on the page
A skip link is a link at the top of the page that sends focus straight to the main content. W3C lists G1 as sufficient for 2.4.1 Bypass Blocks when it is used for exactly that. Sufficient means it settles the rule, not that the rule demands it. W3C sorts the documented ways past a repeated block into two families, one built from links and one built from grouping. The grouping family is where landmarks and a heading at the start of each section sit. Either of those satisfies 2.4.1 on its own, with no skip link anywhere on the page. W3C's own test rule for this criterion reads the same way, since it passes when any one of four routes passes. So do not test this by pressing Tab once and looking for a link. That test fails conforming pages. G1 does have a five-step check of its own, and the last two steps are where real sites break. Activating the link has to move focus into the main content, and focus has to still be there a moment later. On visibility, W3C would rather the link were visible all the time, and it names six groups who lose out when it is hidden. Switch users, people who generate keystrokes slowly, magnification users, screen reader users working alongside sighted colleagues, keyboard-only users and voice-recognition users. Then it concedes that 2.4.1 does not require it. Visible on focus is the floor, not the recommendation.
How we find it in an audit
We start by asking whether the page gets past its repeated blocks at all, by any documented route. A page with real landmarks and a heading on its main content is not a finding just because it has no skip link. Where a skip link does exist we run W3C's five steps. Is it the first focusable control, does its text say where it goes, and is it visible at least on focus? Then, does activating it move focus into the main content, and is focus still there afterwards? The last two are where most of them fail, usually because the target has no tabindex and the browser scrolls the page without moving anything. A skip link pointing at an anchor that was deleted in a redesign turns up more often than you would expect.
How affected users experience it
For somebody driving the page from the keyboard, the header is a toll charged on every page. W3C's own worked example counts about 40 links and 200 words of header before the main story, and that toll gets paid on every visit. A skip link drops the toll to one keystroke, and landmarks do the same job for a screen reader user by letting them jump to main directly. The version that hurts most is the skip link that looks right and does nothing. The reader presses Enter, hears the page scroll, and then finds their next Tab press back at the second link in the header.
Passes vs. fails
Passes
<a href="#main" class="skip-link">Skip to main content</a>
<!-- ... -->
<main id="main" tabindex="-1">Fails
<a href="#main" class="skip-link">Skip to main content</a>
<!-- the anchor was renamed in a redesign -->
<div id="content">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Bypass Blocks of Repeated ContentA tool finds candidates, you decide
- Document has heading for non-repeated contentNothing implements this yet
- Document has a landmark with non-repeated contentA tool can check this
- Block of repeated content is collapsibleNothing implements this yet
- Document has an instrument to move focus to non-repeated contentNothing implements this yet
Other ways to satisfy this rule
10 guides on this site are filed under 2.4.1 Bypass Blocks. W3C lists this one as sufficient for that rule when used for creating links to skip blocks of repeated material, so the condition is part of the test rather than a footnote to it.
- ARIA11sufficientAdd landmarks so users can skip around
- G123sufficientAdd skip links past repeated content blocks
- G124sufficientAdd top-of-page links to each content area
- H64sufficientGive every iframe a descriptive title
- H69sufficientStart every content section with a real heading
- PDF9sufficientTag PDF headings with real heading tags
This guide is our interpretation of W3C technique G1: Adding a link at the top of each page that goes directly to the main content area. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.