Provide a way to bypass repeated 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.
Overview
Why this matters
When repeated headers, menus, and promo blocks come first, keyboard users must tab through the same controls on every page before reaching core content. This adds friction and can make task completion significantly slower.
How to fix this issue
Provide a skip mechanism at the start of each page, typically a visible-on-focus 'Skip to main content' link targeting the main region. Ensure activation moves keyboard focus to a valid target inside `<main>`.
Developer Guidance
Render the skip link as the first interactive element in `<body>`, not inside a late-mounted component. The target should be programmatically focusable (`tabindex="-1"`) when needed so focus actually lands after activation. Keep this pattern in shared layout templates so all routes inherit it consistently.
Code Examples
Incorrect Implementation
<header>...</header>
<nav>...</nav>
<main id="main">...</main>
<!-- No skip mechanism -->Correct Implementation
<a class="skip-link" href="#main">Skip to main content</a>
<header>...</header>
<nav>...</nav>
<main id="main" tabindex="-1">...</main>Real-World Implementation
Before
<body>
<header>Global navigation with 12 links</header>
<nav>Section navigation with 8 links</nav>
<main id="main">Checkout form</main>
</body>
<!-- Keyboard user must tab through 20 links before the form -->After
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>Global navigation with 12 links</header>
<nav>Section navigation with 8 links</nav>
<main id="main" tabindex="-1">Checkout form</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. Reload the page and press Tab once.
- 2. Verify the skip link appears visually and receives keyboard focus.
- 3. Press Enter on the skip link and confirm focus lands at the start of main content.
- 4. Continue tabbing to ensure focus order continues correctly from that point.
- 5. Repeat on templates/routes (home, list, detail, form) to confirm consistency site-wide.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance