A skip link lets a keyboard or screen-reader user skip the header — logo, menu, search, breadcrumb — to land directly on the content. Without it, they have to tab through 20 to 40 repeated elements on every page before reaching the essentials. It's RGAA criterion 12.7, applicable to every page, and it fits in about fifteen lines.

Minimal implementation

<!-- First thing after <body> -->
<a href="#main" class="skip-link">Skip to content</a>

<header>...</header>
<main id="main" tabindex="-1">...</main>
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0B0B0E;
  color: #FFF;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

✓ What makes this pattern well-built

The link is invisible by default but becomes visible on focus (first Tab). Enter jumps to `#main`, focusable thanks to `tabindex="-1"`. The user then resumes Tab from the content, without having crossed the header.

The 3 mistakes to avoid

  • →Hiding it with `display: none`: it disappears for the keyboard too and is useless — use the off-screen offset, as above
  • →Forgetting `tabindex="-1"` on the target: without it, focus doesn't really land on `<main>` in some browsers
  • →Placing it after the menu: it must be the very first focusable element on the page

Beyond the skip link: keyboard navigation

The skip link is only one brick. A genuinely keyboard-navigable page also requires a logical tab order (criterion 12.8), an always-visible focus (criterion 10.7) and no keyboard trap — you must be able to enter AND leave each component. The skip link is the entry test: if it's missing, the rest is often missing too.

// Multiple skip links?

On a complex site, you can offer several: "Skip to content", "Skip to search", "Skip to menu". A single one to the main content is enough for compliance, but the others genuinely improve navigation comfort.

Frequently asked questions

Must the skip link be visible at all times?

No. It can stay hidden until it has focus, then appear on the first Tab. The key is that it becomes visible on focus and is never removed from the tab order.

Where to place it in a Nuxt or React site?

In the root layout, right at the top, before the header, so it's the first focusable node rendered. The `#main` target is the page's `<main>` element.

Does a mega-menu change anything?

Yes: the richer the header, the more useful the skip link, because the number of tabs to avoid grows. It's precisely on mega-menu sites that it saves the most time.

Check the presence and proper working of the skip link across your whole site:

→ Run an audit