Bypass Blocks

In brief

On most sites every page starts with the same logo, search box and navigation menu. A sighted mouse user ignores it at a glance. A keyboard user has to tab through every link, on every page, before reaching the content, and a screen reader user has to listen to it all again.

This criterion requires a mechanism to bypass blocks of content that are repeated on multiple web pages. The usual mechanism is a "skip to main content" link at the top of the page, but landmarks and headings that people can jump between also count.

What does it cover?

• What is a repeated block: Navigation menus, header content and advertising frames that appear on several pages of the same site. Single repeated words, phrases or links do not count as blocks.
• Skip links: A link at the start of the page that goes directly to the main content (technique G1), or links to each main area of the page (G124).
• Landmarks: Using ARIA landmark regions or HTML sectioning elements such as header, nav, main and footer lets assistive technology users jump between regions (ARIA11).
• Headings: Headings at the start of each section let users jump through the page (H69).
• Scope: It applies to sets of related pages that share a purpose and come from the same author or organization, not to unrelated pages.
• Browser help: No redundant mechanisms are required. If the user agent already gives a way to reach the main content, a skip link may be unnecessary, but do not rely on that.
• Out of scope: Structural markup on the page is 1.3.1. Several ways to find a page is 2.4.5. Where focus goes next is 2.4.3.

Who does it affect?

Keyboard-only users and switch users, who would otherwise tab through dozens of links on every page. Screen reader users, who hear the same navigation again and again. People who use voice control or screen magnifiers and lose time moving past repeated blocks. People with motor disabilities, for whom each extra keystroke has a cost.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. A fast way to the main content is part of "operable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 2.4.1 by reference and turns it into separate clauses for each kind of ICT.

In EN 301 549 V3.2.1 the software clause did not carry this criterion, because it concerns sets of web pages. Check whether V4.1.1 changes that. Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 2.4.1 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. A skip link at the top of the page

Make it the first focusable element. It can be hidden until it receives focus, but it must become visible then.

<body>
  <nav>… 40 links …</nav>
  <main>…</main>
</body>

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <nav>… 40 links …</nav>
  <main id="main" tabindex="-1">…</main>
</body>

.skip-link {
  position: absolute; left: -999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: #fff; color: #000; padding: 0.5rem 1rem;
}

2. A skip link that cannot be seen

A link hidden with display: none or visibility: hidden is not focusable. Move it off-screen instead and show it on focus.

.skip-link { display: none; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; }

3. Landmark regions

Use landmarks so assistive technology can list and jump to the regions. Give a label when a landmark appears more than once.

<div class="top">…</div>
<div class="menu">…</div>
<div class="content">…</div>

<header>…</header>
<nav aria-label="Main">…</nav>
<main id="main">…</main>
<footer>…</footer>

4. Headings at the start of sections

A heading before each main section lets heading navigation work as a bypass mechanism.

<div class="section-title">Our services</div>

<h2>Our services</h2>

5. Title for frames

If you embed repeated content in an iframe, give it a title so users can recognise it and decide whether to enter it.

<iframe src="/ads/banner.html"></iframe>

<iframe src="/ads/banner.html" title="Advertisement"></iframe>

6. A skip link target that receives focus

In some browsers focus does not move to a non-focusable target. Give the target tabindex="-1" so that the next Tab continues from there.

<div id="main">…</div>

<main id="main" tabindex="-1">…</main>

Code examples for mobile

This criterion concerns repeated blocks across a set of web pages. In native apps the same need is met by headings and by grouping related controls, so that screen reader users can jump past a long toolbar or list.

iOS (SwiftUI)

import SwiftUI

struct ArticleScreen: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                // Headings let VoiceOver users jump section by section with the rotor
                Text("Latest articles")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                ArticleList()

                Text("Popular topics")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                TopicGrid()
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.Modifier

@Composable
fun ArticleScreen() {
    Column {
        // Headings let TalkBack users jump between sections
        Text(
            "Latest articles",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        ArticleList()

        Text(
            "Popular topics",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        TopicGrid()
    }
}

How to test

• Tab from the top: Load a page and press Tab once or twice. Does a skip link appear? Does it become visible when focused?
• Use the skip link: Activate it with Enter. Does focus move to the main content? Does the next Tab continue from the main content rather than back in the menu?
• Check it on every template: The link and its target must exist on all pages that share the repeated header.
• List the landmarks: Use a screen reader landmark list or a browser extension. Are banner, navigation, main and contentinfo present, and are repeated ones labelled?
• List the headings: Is there a sensible heading at the start of each main section?
• Check frames: Do embedded frames have meaningful titles?
• Test with real tools: Try NVDA, JAWS or VoiceOver and jump by landmark and by heading.
• Use a checker as a starting point: Automated tools can check that landmarks and a main region exist, but not that the skip link goes to the right place.

Common mistakes

• No skip link and no landmarks: There is no way past the navigation.
• A skip link hidden with display: none: It cannot be focused.
• A skip link that never becomes visible: Sighted keyboard users cannot see where they are.
• A broken target: The href points to an id that does not exist.
• The skip link only on the home page: It must be on every page that repeats the header.
• Using divs instead of landmarks: Assistive technology has nothing to jump to.
• Several unlabelled nav regions: Users cannot tell them apart.
• Skipping to the wrong place: The target must be the start of the main content, not the footer.

Sources

• Understanding SC 2.4.1: Bypass Blocks (W3C), opens in a new tab
• G1: Adding a link at the top of each page that goes directly to the main content area (W3C), opens in a new tab
• ARIA11: Using ARIA landmarks to identify regions of a page (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.