Skip Link: Jump Straight to the Main Content

A skip link is the first link on a page, usually labelled "Skip to main content". It lets keyboard and screen reader users jump past the logo, the menu and the search bar straight to the content they came for. Without it, a menu with 40 links means 40 presses of Tab – on every single page.

What it means

The skip link is the classic way to meet WCAG 2.4.1 Bypass Blocks, a Level A criterion of WCAG 2.2: "A mechanism is available to bypass blocks of content that are repeated on multiple web pages." Typical repeated blocks are the header, the main navigation and advertising areas. Via EN 301 549 (clause 9.2.4.1), the requirement is also part of the European Accessibility Act.

The W3C names who benefits: screen reader users, who no longer hear the same header on every page; people who rely on keyboard navigation, who reach the content with fewer keystrokes; and screen magnifier users, who no longer have to search for where the content starts.

A skip link is not the only way to pass 2.4.1. The W3C lists several sufficient techniques:

Examples

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>… logo, navigation with 40 links …</header>
  <main id="main" tabindex="-1">
    <h1>Running shoes</h1>
  </main>
</body>

<style>
  .skip-link { position: absolute; left: 8px; top: -100px; }
  .skip-link:focus { top: 8px; background: #ffffff; color: #1a1a1a; padding: 8px 16px; }
</style>

The link stays off-screen until it receives focus, then slides into view. tabindex="-1" on the target lets the browser move focus there reliably, so the next Tab continues inside the main content.

A skip link hidden off-screen must become visible on focus – otherwise sighted keyboard users press Tab and nothing seems to happen, which also fails focus visible.

How to test a skip link

Questions