Skip to lesson content
WCAG 2.4.1 · Level AEasy10 min readNavigation

Missing Skip Navigation Links

Overview

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.

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.

WCAG Criterion:2.4.1
Conformance Level:Level A
Difficulty:Easy
Time to fix:~10 min
Category:Navigation

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
<!-- No skip link — keyboard users must tab through the entire nav on every page load --> <nav>...50 nav links...</nav> <main>...content...</main>

The Fix

Use this accessible pattern instead.

[ CORRECT ]
<!-- 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.

Framework Notes

How to apply this fix in your stack.

[ REACT ]
// 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> </> ); }

FAQ

Related lessons