Bypass Blocks

Why it matters

Do the arithmetic once. W3C's own worked example puts about 40 links between a keyboard user and the main story, 200 words between a screen reader user and that same story, and a hunt around the layout for somebody using magnification. Multiply that by every page and every visit. The standard does not call this an inconvenience, either. It says the keystrokes may cause severe physical pain for some users. A sighted mouse user skips the header with their eyes and never notices doing it. This rule is that same shortcut, handed to everybody else.

Who this rule protects

This affects keyboard and switch users, who would otherwise press Tab dozens of times on every page, screen-reader users jumping by landmark or heading, screen-magnifier users hunting for where the main content starts, and people for whom repeated keystrokes are physically painful.

How to check it yourself

1. 1Load the page and work out how a keyboard user gets past the repeated header. A skip link as the first focusable element is one passing answer. A landmark structure is another. A heading on the main content is a third. A site with none of the three is the one that fails.
2. 2If there is a skip link, run the five checks in order. It is the first focusable control, its text says it goes to the main content, it is visible at least while it has focus, activating it moves focus, and focus ends up in the main content.
3. 3Check the skip link moves focus rather than only scrolling. If the viewport jumps and focus does not, the next Tab press starts back in the header.
4. 4Confirm the page marks up main, nav and header regions, so screen-reader users have the landmark route as well as the link.
5. 5Look for the second pattern too. A long filter panel or a long form ahead of the results is a block of its own, and a link that jumps to the end of it is the documented answer.

Failures we see most often

• No skip link, no landmarks and no heading on the main content, leaving a 40-link mega menu between every visitor and every page.
• A skip link that stays invisible even when it has focus, so a sighted keyboard user tabs onto something they cannot see.
• A skip link pointing at an anchor that no longer exists, so activating it does nothing and focus stays where it was.
• A skip link that fails a Level A rule of its own, such as one built from a div with a click handler. The rule asks for a mechanism, and a mechanism has to conform before it counts as one.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Blind and screen reader userspeople who cannot see the screen
• Low visionpeople who can see the screen but not easily
• Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely

How this one is tested

We list 5 ACT rules against 2.4.1. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

• 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

How to fix it

• Add an anchor as the first element on the page, targeted at the main content container and revealed on focus. Thirty minutes of work, and keyboard users stop tabbing through your menu on every page of the site.
• Wrap each region in the element it belongs in, using <header>, <nav>, <main> and <footer>. That markup pays for itself twice, since conveying structure in code is what 1.3.1 asks for as well.
• Put a real heading on the main content. It is a documented bypass route on its own, and it is the route screen-reader users are most likely to take in practice.
• Ship both the link and the structure. The structure is what makes the rule pass. The link is what helps the sighted keyboard user who has nothing to jump with.
• For a long filter panel or a long list of options ahead of the content, add a link that skips to the end of that block rather than back to the top of the page.

Passes vs. fails