a11y/skip-link

Why

Without a way past the header, a keyboard user presses Tab through every navigation link on every page before reaching the content. Landmarks help screen reader users, but sighted keyboard users need the link.

Fix

Make the first focusable element of the layout <a href="#main" class="skip-link">Skip to main content</a>, give <main id="main" tabindex="-1">, and show the link when it has focus (visually hidden until :focus). Put it in the shared layout, not per page.

Examples

<!-- bad: the first Tab stop is the logo, then 30 menu links -->
<header><a href="/">Logo</a><nav>…</nav></header>
<!-- good -->
<a class="skip-link" href="#main">Skip to main content</a>
<header>…</header>
<main id="main" tabindex="-1">…</main>

Sources

• WCAG 2.2, Understanding SC 2.4.1 Bypass Blocks
• WCAG 2.2 Technique G1, adding a link at the top of each page that goes to the main content

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/skip-link