Skip to main content
Accessibility Pro
Startscanning

Fix guides · WCAG 2.2

Adding a skip link

2.4.1 Bypass Blocks · Level A W3C: Understanding 2.4.1

A keyboard user reaches the page content only after tabbing through every link that comes before it. With six navigation links in the sample, that is six key presses on every page. A skip link is the first focusable element and jumps past them.

Who this affects: People who navigate with a keyboard or switch access.

The failing markup

<header>
  <nav aria-label="Main">
    <ul>
      <li><a href="/shop">Shop</a></li>
      <li><a href="/new">New in</a></li>
      <li><a href="/sale">Sale</a></li>
      <li><a href="/stores">Stores</a></li>
      <li><a href="/help">Help</a></li>
      <li><a href="/account">Account</a></li>
    </ul>
  </nav>
</header>
<main id="main">
  <h1>Shop</h1>
  <p>New arrivals every Friday.</p>
</main>

How to fix it

  1. Add <a href="#main">Skip to main content</a> as the first element in <body>, and give <main> that id.
  2. Hide the link off-screen until it receives focus, then show it. Do not use display: none, which removes it from the tab order.
  3. Add tabindex="-1" to <main> so activating the link moves keyboard focus there, not only the scroll position.

The change

Added: <a class="skip" href="#main">Skip to main content</a><header>  <nav aria-label="Main">    <ul>      <li><a href="/shop">Shop</a></li>      <li><a href="/new">New in</a></li>      <li><a href="/sale">Sale</a></li>      <li><a href="/stores">Stores</a></li>      <li><a href="/help">Help</a></li>      <li><a href="/account">Account</a></li>    </ul>  </nav></header>Removed: <main id="main">Added: <main id="main" tabindex="-1">  <h1>Shop</h1>  <p>New arrivals every Friday.</p></main>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • arc-style: skip-link-missing, WCAG 2.4.1

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • Landmarks and headings can also satisfy 2.4.1, because screen readers can jump between them. Sighted keyboard users cannot, which is why a skip link is still the robust fix.