WCAG 2.4.1 Bypass Blocks

What it asks

Most sites repeat the same things at the top of every page: a logo, a navigation menu, a search box, perhaps a row of links to other sections. Someone using a mouse looks straight past them. Someone using a keyboard has to press Tab through every one of those links before reaching the content, on every page. Someone using a screen reader hears them read out, on every page. This rule asks for a way to skip that.

The usual answer is a skip link: a link at the very start of the page, often hidden until it has focus, that reads "Skip to main content" and jumps to the start of the content. It is not the only answer. Page landmarks, such as a main element and nav elements, let screen reader users jump between regions directly. Headings at the start of each section let them jump by heading. A menu that can be collapsed with one control also works. Any of these satisfies the rule.

The criterion is about content repeated across pages, not about long pages. A single long article with no repeated blocks does not need a skip link under this rule. It is Level A, so it is in scope for every WCAG claim.

Its official name is success criterion 2.4.1 Bypass Blocks, at Level A. It was added in WCAG 2.2, under guideline 2.4 Navigable and the principle Operable. The W3C’s normative text says, in part:

“A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.”

From WCAG 2.2, W3C. Full explanation: Understanding 2.4.1 Bypass Blocks.

Who it helps

Keyboard users, including people with motor disabilities who find each key press costly, and people using switch access, where moving through thirty navigation links one at a time can take a minute per page.

Screen reader users, who would otherwise hear the whole header read out before anything that is specific to the page. People using screen magnification, who see a small part of the page at a time and need a quick way to the content.

What passes and what fails

These pass

• A "Skip to main content" link as the first thing in the tab order, visible when it has focus, pointing at a main element that exists and takes focus.
• A page with a main landmark and nav landmarks, and headings at the start of each section, with no skip link at all.
• A skip link that is hidden off screen until focused, then appears at the top left of the page.
• A navigation menu with an "Expand" control, collapsed by default, so there is nothing to skip until the person opens it.
• A page with no repeated blocks: a stand-alone landing page with only its own content. The rule does not apply.

These fail

• A skip link whose target id was removed in a redesign. Pressing it does nothing.
• A skip link hidden with display: none, so it never receives focus and no keyboard user can find it.
• Landmarks on the header and footer but no main element, so there is no region for the content and nothing to jump to.
• A skip link whose target is a div that cannot take focus, so the page scrolls but the next Tab press goes back to the navigation.
• A long navigation menu with no landmarks, no skip link and no headings, where every page starts with the same forty links.

Landmarks alone satisfy the rule. A visible skip link still earns its place: keyboard users with no screen reader have no landmark list to jump by, and many buyers expect to see one.

How to test it by hand

1. Load a page that shares its header with the rest of the site and press Tab once. If a skip link appears, press Enter and then Tab again. Focus should land inside the main content, not back in the navigation.
2. If no skip link appears, read the page structure in the browser’s developer tools or an accessibility inspector. Look for a main element, nav elements, and headings at the start of the content.
3. Check that the skip link’s target exists on every template, not just the home page. A link to #main on a page with no main is a broken link.
4. Check that the skip link can be seen when it has focus, so a sighted keyboard user knows it is there.
5. Repeat on each template: listing, article, form, account page.

What automated testing can decide

What a machine can decide

Much of this is a matter of fact about the page. Automated testing can tell whether a skip link exists, whether its target exists, and whether the page has a main region, other landmarks and headings. A page with no repeated content at all can be recorded as not applicable with the evidence to show it.

What it cannot

A skip control driven by script, or a collapse toggle whose effect only shows after a click, cannot always be settled automatically. Whether the content ahead of the skip point is really the content a person wants is a judgement, and so is whether a site’s only mechanism is good enough in practice for the people who use it.

How Dreven handles it

Dreven looks at every page in an audit for a way past its repeated content and shows you what it found: any skip link and where it leads, and the page’s landmarks and headings. A reviewer decides each result, and the report says how.

The report also notes whether a visible skip link exists, because that is the question buyers tend to ask.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 2.4.3 Focus Order (Level A). A skip link moves focus. Where it lands is a focus order question.
• 1.3.1 Info and Relationships (Level A). Landmarks and headings must be real structure in the code, not just styling.
• 2.4.7 Focus Visible (Level AA). A skip link only helps a sighted keyboard user if they can see it when it has focus.
• 2.4.5 Multiple Ways (Level AA). Several ways to find a page, which is a different kind of navigation help.

Questions people ask

All WCAG 2.2 criteria, in plain words