Provide a skip link to bypass repetitive navigation

WCAG 2.4.1
Bypass Blocks

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If users must tab through the same menu more than once, you need a skip link.

Why this matters and how to fix it

Why this matters

Keyboard and screen reader users must navigate sequentially. Without a skip link, they must tab through site navigation and repeated UI headers on every page load. This adds fatigue, slows navigation, and makes the interface frustrating on large sites.

How to fix this issue

Place a 'Skip to main content' link as the first focusable element on the page. The link should move keyboard focus directly to the <main> landmark or a defined content container (e.g., `id='main'`). Ensure the skip link becomes visible when focused.

Automated detection · Manual review recommended

Developer guidance

Skip links should be included in your layout or app shell, not per-page. In React/SPA environments, verify that focus actually shifts to <main> on navigation — otherwise the skip link appears to work visually but fails assistive technology users.

Code examples

Incorrect Implementation

<body>
  <nav>...</nav>
  <main>...</main>
</body>

Correct Implementation

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

Real-World Examples

Before

<header class="global-header">...</header>
<main>Dashboard content</main>
<!-- Without a skip link, keyboard users must tab past the entire header every time -->

After

<a class="skip-link" href="#main">Skip to main content</a>
<header class="global-header">...</header>
<main id="main">Dashboard content</main>

CSS Example (Guidance)

/* Skip link visible only when focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 1000;
}
.skip-link:focus {
  top: 0;
}

Manual testing

  1. 1. Load the page and press Tab.
  2. • Expected: The skip link receives focus first and becomes visible.
  3. 2. Press Enter to activate the skip link.
  4. • Expected: Keyboard focus moves directly to the main content container.
  5. 3. Check that the target section has a unique `id` (e.g., `id="main"`).
  6. 4. Confirm the <main> region is not hidden behind sticky headers after skipping.
  7. 5. Test using a screen reader:
  8. • Ensure the skip link is announced and functions as described.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance