WCAG 2.4.1 Bypass Blocks

Success criterion 2.4.1 saves keyboard and screen reader users from going through the same header, menu and promo bar on every page before they reach the content. On a shop with a large mega menu that can mean dozens of Tab presses per page. It is level A and part of EN 301 549 (clause 9.2.4.1).

What the criterion requires

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

WCAG does not prescribe one technique. Sufficient techniques listed by W3C include:

• a link at the top of the page that jumps to the main content ("Skip to main content");
• a link at the start of a repeated block that jumps to its end;
• ARIA landmarks (<header>, <nav>, <main>, <footer> or the equivalent roles) to identify page regions;
• headings at the beginning of each section of content;
• expandable and collapsible menus.

In practice a skip link plus a correct <main> landmark covers both keyboard-only users (who cannot jump by landmark without extra tools) and screen reader users.

Typical failures on an online shop

• no skip link, and a header with search, account, wishlist, cart, currency switcher and a 40-link mega menu before the content;
• a skip link that points to an anchor that does not exist, or to an element that cannot receive focus;
• a skip link that stays invisible when it is focused;
• no <main> landmark, or the whole page wrapped in <div> elements;
• a long filter sidebar on category pages with no way to jump to the products.

How to check it

Automated: our checker tests whether the page offers at least one bypass mechanism — a skip link, a landmark or a heading (bypass rule). It cannot judge whether the link is visible on focus or lands in the right place.

By hand: load a page and press Tab once. A "Skip to content" link should appear. Press Enter, then Tab again: focus should land at the start of the main content, not back in the menu. With a screen reader, list the landmarks and check there is exactly one main region.

How to fix it

• Add a skip link as the first focusable element in the theme layout, pointing to <main id="main-content">.
• Make sure the target can receive focus (add tabindex="-1" if needed) so focus really moves.
• Show the skip link when focused, with good contrast.
• Use semantic landmarks: <header>, <nav>, <main>, <footer>.
• Start each content section with a real heading.

Related criteria

• 2.4.3 Focus Order — the skip link should be first in the focus order.
• 2.4.6 Headings and Labels — headings must describe the section.
• 2.4.7 Focus Visible — the skip link must be visible when focused.

Frequently asked questions

Is a skip link required by WCAG 2.4.1?

Not strictly. WCAG asks for a mechanism to bypass repeated blocks. A "Skip to main content" link is the most common one; ARIA landmarks such as main and nav, and headings at the start of sections, are also sufficient techniques.

Can the skip link be hidden?

It can be visually hidden until it receives keyboard focus, then it must become visible. A link that stays invisible when focused confuses sighted keyboard users.

What blocks have to be bypassed on a shop?

Content repeated on many pages: the header, announcement bar, main navigation and mega menu, and sometimes long filter sidebars before the product list.