2.4.1 Bypass Blocks

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Is there a mechanism to bypass blocks of repeated content?

What

Users must be able to bypass blocks of content that are repeated on multiple web pages. This includes navigation menus, banners, and sidebars. This ensures that users, especially those who rely on assistive technologies, can reach the main content quickly.

Examples include:

• Websites with a fixed header and navigation menu on every page.

• Blogs with a sidebar that contains recent posts and categories.
• E-commerce sites with filter menus on every product page.

Why

Users who navigate websites with screen readers, keyboards, or other assistive technologies might struggle with repeated blocks of content. If they cannot skip these sections, they must tab through every menu item or banner on each new page.

Bypass mechanisms improve accessibility as they:

• Enhance usability for people who use screen readers, keyboard navigation, or other assistive tools.
• Reduce cognitive load and provide a way for users to jump directly to the page content.
• Improve efficiency for all users, especially those who rely on keyboard shortcuts.

Who

Affected users

This check affects the following users who have:

• Blindness or are visually impaired: Who use screen readers to navigate pages.
• Keyboard-only: Who tab through elements with a keyboard instead of a mouse.
• Cognitive disabilities: Who benefit from structured navigation.

Examples

This section provides some pass and fail examples.

Pass examples

Skip link:
A Skip to Main Content link is placed at the top of the page and is visible when focused.

<a href="#main-content" class="skip-link">Skip to main content</a>
.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}

Landmark regions:
Landmark regions use HTML5 structural elements like <main>, <nav>, and <header> so that screen reader users can skip repeated content.

<header>
  <nav>...</nav>
</header>
<main id="main-content">
  <h1>Page Title</h1>
  <p>Main content goes here...</p>
</main>

ARIA landmarks:
ARIA landmarks provide a way for assistive technologies to recognize page sections.

<nav role="navigation">...</nav>
<main role="main">...</main>

Fail examples

• No skip link or landmarks:
  For example, a page that forces users to navigate through the entire menu before they reach the content.

• Hidden skip link that never becomes visible:
  For example, a skip link that exists but is always hidden with CSS, such as, display: none, without a focus state.

• No landmark or heading structure:
  For example, a site with multiple repeated sections but no <main> element or ARIA landmarks.

How

This section provides information on how to review and fix the issue.

How to review it

When this check flags a page, confirm that a method exists for users to bypass repeated content.

• Look for a skip link
  • Load the page and press the Tab key.
  • If a Skip to Main Content link appears, this is a pass.
  • If no skip link appears, check the page structure for other bypass methods.
• Check for landmarks
  • Open Developer Tools (F12) → Elements Tab.
• Look for semantic elements like <main>, <nav>, and <header>.
  If they exist and are used correctly, this is a pass.
• Verify ARIA landmarks
  In Developer Tools, check if elements have ARIA roles such as role="navigation" or role="main".
  If there are no ARIA landmarks or structural elements, this is a fail.

How to fix it

This section provides instructions and some examples of how to fix this issue.

Add a skip link

Place a skip link at the beginning of the page:

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

Ensure that it becomes visible when focused:

.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}

Use semantic HTML for landmarks

Use semantic HTML for landmarks in the page elements where they are present.
Ensure that your page structure includes:

<header>
  <nav>...</nav>
</header>
<main id="main-content">
  <h1>Page Title</h1>
  <p>Main content goes here...</p>
</main>

Use ARIA landmarks

Use ARIA landmarks as an extra measure.
For additional support, use ARIA roles:

<nav role="navigation">...</nav>
<main role="main">...</main>

Additional resources

WCAG success criteria

2.4.1 Bypass Blocks

Is there a mechanism to bypass blocks of repeated content?

<a href="#main-content" class="skip-link">Skip to main content</a>
.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}

<header>
  <nav>...</nav>
</header>
<main id="main-content">
  <h1>Page Title</h1>
  <p>Main content goes here...</p>
</main>

<nav role="navigation">...</nav>
<main role="main">...</main>

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

.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}

<header>
  <nav>...</nav>
</header>
<main id="main-content">
  <h1>Page Title</h1>
  <p>Main content goes here...</p>
</main>

<nav role="navigation">...</nav>
<main role="main">...</main>