Level AWCAG 2.0

2.4.1 Bypass Blocks

A mechanism is available to bypass blocks of content that are repeated on multiple web pages.

Last reviewed: September 9, 2026

Understanding 2.4.1

Most pages on a site repeat the same navigation, header, and branding blocks before reaching the unique content of that page. A sighted mouse user can visually scan past this repetition instantly, but a keyboard user must tab through every link and a screen reader user must listen to every item read aloud. This criterion requires a way to jump straight past repeated blocks, which primarily benefits keyboard-only users and screen reader users navigating a site with many pages.

How to Meet It

The most common technique is a 'skip link': a link placed as the first focusable element on the page that jumps to the start of the main content (e.g. `#main-content`). It can be visually hidden by default and revealed on keyboard focus so sighted keyboard users can see and use it. An alternative or complementary technique is to mark up the page with landmark regions (`<nav>`, `<main>`, `<header>`) or a proper heading structure so that assistive technology users can jump between sections using their software's built-in navigation commands, without requiring an explicit visible link.

Code Examples

INCORRECT

<body>
  <header>
    <nav>
      <!-- 30+ navigation links repeated on every page -->
    </nav>
  </header>
  <main>
    <h1>Article Title</h1>
    ...
  </main>
</body>

CORRECT

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header>
    <nav>
      <!-- 30+ navigation links repeated on every page -->
    </nav>
  </header>
  <main id="main-content">
    <h1>Article Title</h1>
    ...
  </main>
</body>

INCORRECT

.skip-link {
  display: none; /* Removed from rendering entirely, including on focus */
}

CORRECT

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 0;
  z-index: 100;
  padding: 8px 16px;
  background: #fff;
}

Frequently Asked Questions

Do I need a visible skip link if my page already uses landmark regions like <main> and <nav>?

Landmark regions satisfy this criterion for screen reader users who navigate by region, but they do nothing for sighted keyboard-only users who have no assistive technology announcing landmarks. If your site has more than a handful of repeated navigation links, provide both: landmarks for AT users and a visible-on-focus skip link for keyboard users.

Is it acceptable to hide the skip link completely with display: none or visibility: hidden?

No. Content hidden with display: none or visibility: hidden is removed from the accessibility tree and cannot receive keyboard focus, so it fails the criterion. Use an off-screen positioning technique (e.g. absolute positioning far off-canvas) that is reversed on :focus instead.

Related Success Criteria

2.4.2 Page Titled 2.4.3 Focus Order 2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways

Quick Facts

Criterion2.4.1
LevelA
IntroducedWCAG 2.0

Automate Compliance

AccessiSight automatically scans and identifies 2.4.1 issues in your codebase.

Try Scanner Free