2.4.1 Bypass Blocks (Level A): WCAG explained. Axevoo

In plain English

Every page on your store starts with the same block: logo, menu, search, cart. A sighted mouse user just looks past it. But a keyboard user would have to Tab through every one of those links on every page before reaching the products, and a screen-reader user would hear them read out every time.

This rule says: give people a shortcut past the repeated stuff. The classic solution is a “Skip to main content” link, hidden until you Tab to it, that jumps straight to the products or article.

Who this is for

Keyboard users, who otherwise Tab through the whole menu on every page.
Screen-reader users, who can jump by skip links, headings, or landmarks instead of re-hearing the navigation each time.

What “good” looks like

A skip link as the first focusable element, plus proper landmarks.

<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header>…nav…</header>
  <main id="main">
    …products / article…
  </main>
</body>

/* Hidden until focused, then visible */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

Where stores get it wrong

No skip link at all, a skip link that points to the wrong place, or a page with no <main> landmark and no real headings, so there is nothing to skip to. These are quick wins that appear on the common failures list.

Frequently asked questions

What does bypass blocks mean?+

Success Criterion 2.4.1 (Level A) requires a way to skip over content that repeats on many pages, such as the header and navigation, so keyboard and screen-reader users can get to the main content quickly. A skip link, proper headings, or ARIA landmarks all satisfy it.

What is a skip link?+

A skip link is a link, usually the very first thing focusable on the page, that reads something like 'Skip to main content'. It is often hidden until it receives keyboard focus, then jumps focus straight to the main content, past the menu.

Do I need a skip link if I have headings and landmarks?+

Proper headings and ARIA landmarks also satisfy this criterion, since screen-reader users can jump by them. But a visible-on-focus skip link is the simplest, most reliable option and helps sighted keyboard users too, so it is widely recommended.

Bypass Blocks