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.

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.

Framework Notes

How to apply this fix in your stack.

// 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