Pages need a way to skip repeated content

• Rule: axe/bypass
• Checks: Page must have means to bypass repeated blocks
• WCAG: 2.4.1
• Fix class: manual: A fix needs a person to work out what to change, beyond authored text or a visual decision.

Who it affects

• People who use a keyboard or a switch device instead of a mouse.
• People who use a screen reader or a braille display, most of them blind.

How to fix it

The page has no <main> landmark, no headings and no skip link

Wrap the main content in <main> and give it a heading, so screen reader users can jump to it. axe reports this rule as needing review rather than as a failure.

<header>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/orders">Orders</a>
  </nav>
</header>
<main>
  <h1>Order history</h1>
</main>

Keyboard users must tab through long navigation to reach the content

Add a skip link as the first focusable element, pointing to the id of the main content. It may stay visually hidden until it takes focus, but it must then appear. Browsers give sighted keyboard users no way to jump to landmarks or headings, so they need a mechanism of their own, usually a skip link.

<a class="skip-link" href="#main">Skip to main content</a>
<header>
  <p class="site-name">Example Store</p>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/orders">Orders</a>
  </nav>
</header>
<main id="main" tabindex="-1">
  <h1>Order history</h1>
</main>

Fixes that fail

Relying on headings and landmarks alone when the navigation is long

axe passes the page, but sighted keyboard users still tab through every link, since browsers offer no keyboard command to reach a landmark or heading.

Hiding the skip link with display: none or visibility: hidden

It can then never take focus, so no one can use it. Hide it with a class that moves or clips it, and show it on :focus.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.