Skip link

A skip link is a keyboard shortcut at the very top of every page that lets users jump past repeated navigation directly to the main content. It satisfies WCAG 2.4.1 Bypass Blocks (Level A) and is one of the cheapest accessibility wins available.

Why it exists

Consider a typical content site. The header has six top-level nav links, a language switcher, and a theme toggle. The footer has another twelve. Every page repeats those structures. A keyboard or screen-reader user who lands on an article and wants to read it has to Tab through roughly thirty interactive elements before reaching the article body. Multiplied across every page navigation, this is exhausting.

A skip link is a single <a href="#main-content">Skip to content</a> placed as the first focusable element in the document. The user presses Tab once after page load, sees “Skip to content,” presses Enter, and focus moves to the article body.

Implementation

The pattern is small but has a few well-known traps:

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Three details that matter:

1. The link must be visible on focus. A skip link that’s permanently display: none is invisible to sighted keyboard users, who then can’t tell it exists. Hide it offscreen via positioning, not via display: none or visibility: hidden.

2. The target must accept focus. A bare <main> doesn’t take keyboard focus by default. Adding tabindex="-1" makes it programmatically focusable so the browser actually moves focus when the link is followed. Without this, the URL hash changes but focus doesn’t move, and the next Tab restarts from the top of the page — wiping out the entire point of the skip link.

3. It must be the first focusable element. Not “in the first 100 elements” — first. If anything precedes it (a logo link, a search icon), the user has to tab past those before reaching the skip link, defeating the purpose.

Multiple skip links

Long pages with multiple repeated regions sometimes benefit from a small “skip” menu rather than a single link:

• Skip to main content
• Skip to navigation
• Skip to footer

A short visible-on-focus list with three or four destinations is fine. A long auto-generated table of contents at the top of every page is not.

What it doesn’t replace

A skip link is the bypass-blocks safety net. It does not replace proper landmarks (<nav>, <main>, <aside>, <footer>), proper heading structure (one <h1> per page, hierarchical <h2>s), or ARIA aria-label on duplicate landmarks. Screen-reader users move between regions and headings via keyboard shortcuts that depend on those structures being in place; the skip link is for keyboard-only sighted users.