What is a skip navigation link?

A link, usually the first focusable element on the page, that moves focus straight to the main content. It is often visually hidden until focused, so it helps keyboard users without changing the visual design.

Why is a skip link needed?

Without it, keyboard and screen reader users must tab through the full header and menu — often 15 or more stops — on every page before reaching the content. A skip link removes that repetition.

How do I add a skip link?

Add a link at the very top of the page whose target is the fragment id of your ` ` element (for example a target of #main), reveal it on focus with CSS, and make sure the target can receive focus.

Common Violations

Missing Skip Navigation: Why Every Page Needs a Bypass Link

Picture a site with a header containing a logo, a 12-item navigation menu, a search box, and a login link — 15 or so tab stops before reaching the main content. A mouse user's eye jumps straight past all of that to whatever they actually came for. A keyboard or screen reader user has to tab through every single one of those 15 stops, on every single page, every single time they navigate somewhere new.

WCAG Success Criterion 2.4.1 (Bypass Blocks), Level A, requires a mechanism to skip past repeated content — most commonly a "skip to main content" link. Industry data puts this at roughly 55% of ADA web accessibility complaints.

How to fix it

The standard pattern is a link that's the very first focusable element on the page, visually hidden until it receives keyboard focus, and jumps straight to the main content:

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main-content">
    <!-- actual page content starts here -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

The link only needs to be visible when focused — hiding it otherwise is correct, not a compromise, since sighted mouse users don't need it and a permanently-visible skip link is just visual clutter for them.

Landmarks are the other half of the fix

A skip link solves the "get me past the nav" problem, but proper landmark regions (<header>, <nav>, <main>, <footer>, or their ARIA equivalents role="banner"/role="navigation"/role="main"/role="contentinfo") give screen reader users a second, often faster path: most screen readers offer a shortcut to jump directly between landmarks without needing any visible link at all. A page with a real <main> element already satisfies part of this even before a skip link is added — the two techniques are complementary, not redundant.

Why this is worth fixing even on a "simple" site

This one is easy to deprioritize because it never blocks a sighted user and the missing behavior is invisible unless you're actually testing with a keyboard. But for the people it affects, it turns "briefly annoying" into "actively exhausting to use your site at all" — and because it's a Level A criterion with a well-known, five-minute fix, it's also one of the fastest wins available on a fresh accessibility audit.

Official references

Common questions

What is a skip navigation link?: A link, usually the first focusable element on the page, that moves focus straight to the main content. It is often visually hidden until focused, so it helps keyboard users without changing the visual design.
Why is a skip link needed?: Without it, keyboard and screen reader users must tab through the full header and menu — often 15 or more stops — on every page before reaching the content. A skip link removes that repetition.
How do I add a skip link?: Add a link at the very top of the page whose target is the fragment id of your `<main>` element (for example a target of #main), reveal it on focus with CSS, and make sure the target can receive focus.

Want to see how your own site scores?

Run a free accessibility scan