Accessibility Recommended Updated 2026-05-29

Skip links

A 'skip to main content' link as the first focusable element lets keyboard and screen-reader users jump past repeated navigation on every page.

What it is

A skip link is an in-page anchor — usually the first focusable element in <body> — that jumps to the start of the main content. It is hidden until it receives focus, so it stays out of the sighted user’s way but is the first thing a keyboard or screen-reader user hits.

Why it matters

Every page on a site usually starts with the same header, navigation, search box, and notification bar. Without a skip link, a keyboard user tabs through twenty controls before reaching the article they came for, on every single page. Screen-reader users have heading and landmark shortcuts, but switch-device and Tab-only users have nothing. WCAG 2.4.1 (Level A) requires a mechanism to bypass blocks of repeated content; a skip link is the most widely supported way to satisfy it.

How to implement

Put the link first in the document order and target the main content container:

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>…</header>
  <nav>…</nav>
  <main id="main" tabindex="-1">
    <!-- page content -->
  </main>
</body>

Style it so it is invisible by default and visible on focus:

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -3rem;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  z-index: 1000;
  transition: inset-block-start 0.15s;
}

.skip-link:focus {
  inset-block-start: 1rem;
}

Notes:

Use display: none is wrong. It removes the link from the accessibility tree. Use offscreen positioning instead.
tabindex="-1" on <main> ensures focus actually moves to it when the link is followed; some browsers otherwise just scroll the page.
One link is usually enough. A second link to the navigation is fine if the nav is also long.
Keep the text plain. “Skip to main content” is well understood.

Common mistakes

Skip link present but never visible on focus (no :focus style).
Skip link points to a <div> with no id, or the target has been renamed.
Skip link hidden with display: none, so it never receives focus.
Decorative banners or cookie modals sit between the skip link and the main content and steal focus.

Verification

Load the page and press Tab once. The skip link must appear.
Press Enter. Focus must move into the main content, not just scroll the page.
Confirm the link is reachable on every template, not only on the homepage.

Sources & further reading

WCAG 2.4.1 — Bypass Blocks (Level A) — W3C
W3C WAI — Skip Links — W3C WAI
WebAIM — Skip Navigation Links — WebAIM