Provide a way to bypass repeated blocks

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.

First Tab should land on a skip link that jumps straight to main content.

Why this matters and how to fix it

Why this matters

Without a skip link, keyboard and screen reader users must tab through navigation and repeated interface elements on every page load. This creates unnecessary effort and slows down navigation.

How to fix this issue

Add a keyboard-focusable 'Skip to main content' link near the start of the page. It must become visible when focused and move focus to a <main> region or the primary content container.

Automated detection · Manual review recommended

Developer guidance

Place the skip link as the first actionable element in the <body>. Ensure the main content container has an id (such as `id="main"`). Landmarks help navigation but do not eliminate the need for a skip link.

Code examples

Incorrect Implementation

<!-- No skip link -->
<header>…</header>
<nav>…</nav>
<main id="main">…</main>

Correct Implementation

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

Real-World Examples

Before

<body>
  <header>Menu…</header>
  <nav>Links…</nav>
  <main id="main">Content</main>
</body> <!-- No bypass; keyboard user must tab through whole header every page -->

After

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>Menu…</header>
  <nav>Links…</nav>
  <main id="main">Content</main>
</body>

CSS Example (Guidance)

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

Manual testing

  1. 1. Load the page and press Tab immediately.
  2. 2. Confirm the skip link receives focus and becomes visible.
  3. 3. Activate the skip link and verify focus moves to the main content area.
  4. 4. Confirm the <main> region has a unique id that matches the skip link target.
  5. 5. Repeat on multiple pages to ensure consistent placement and behavior.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance