Missing skip navigation links.

Pages with repeated navigation must provide a way to skip directly to the main content, so keyboard users don't have to tab through the same nav links on every page.

WCAG 2.4.1Level A10 min

The problem

Every page that repeats a navigation menu forces keyboard and screen reader users to Tab through every nav link before reaching the content—on every page. A skip link (WCAG 2.4.1) lets them jump straight to the main content in one keystroke. It’s invisible to mouse users, takes a few minutes to add, and dramatically improves the experience for keyboard users on content-heavy sites.

The fix

Fails 2.4.1
<!-- No skip link — keyboard users must tab through
     the entire nav on every page load -->
<nav>...50 nav links...</nav>
<main>...content...</main>
Passes
<!-- Skip link — visually hidden until focused -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content" tabindex="-1">...</main>

<style>
.skip-link { position: absolute; top: -100%; left: 0; }
.skip-link:focus { top: 0; z-index: 9999; padding: 8px 16px;
  background: #000; color: #fff; text-decoration: none; }
</style>

Step by step

  1. Add a skip link as the very first element in <body>.
  2. The link target (#main-content) must exist and have tabindex="-1" to accept programmatic focus.
  3. The link can be visually hidden but must become visible on keyboard focus.
  4. For apps with multiple repeated sections, you can add multiple skip links.

Common mistakes

  • No skip link at all on pages with large navigation.
  • A skip link whose target id doesn’t exist or can’t receive focus.
  • Hiding the skip link with display:none, which removes it for keyboard users too.
  • The skip link never becoming visible when focused.

How to test for it

  • Load the page and press Tab once—the first focusable item should be the skip link, and it should appear.
  • Activate it and confirm focus jumps to <main>.
  • Verify the target has tabindex="-1" so it accepts programmatic focus.

In your framework

// Add once in your root layout component
function Layout({ children }) {
  return (
    <>
      <a href="#main" className="skip-link">Skip to main content</a>
      <Header />
      <main id="main" tabIndex={-1}>{children}</main>
    </>
  );
}

Questions

Does the skip link have to be visible?

It must be visible when focused (keyboard focus). It can be visually hidden at rest. Never use display:none or visibility:hidden.

Find it on your site.

Scan a page and see every place this issue appears, with the element and the fix.

Scan your site