2.4.1 Bypass Blocks

Introduction

This document provides information about the Acquia Web Governance accessibility (glossary term, activate to view definition) 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 (glossary term, activate to view definition), 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 on your Web Governance scan, confirm that a method exists for users to bypass repeated content.

Ensure that the page provides a way for users to bypass repeated content. The check passes on the page if at least one of the following review checks is present and implemented correctly.

Review checks to consider

Does the document have an instrument to move the focus to non-repeated content?

1. Reload the page.
2. Press Tab once.
3. Look for a Skip to content link, or something similar.
4. Press Enter to activate it.
5. Make sure that the keyboard focus moves directly to the main content.
6. Continue tabbing to check that focus stays inside the main content area.

Passes if:
There is a keyboard-accessible way to jump straight to the main content.

Are blocks of repeated content collapsible?

1. Identify repeated content such as navigation menus, sidebars, or filter panels.
2. Check if the block can be collapsed.
3. Confirm that:
   • There is a visible control, for example, a button.
   • The control works with keyboard only, such as with Tab + Enter/Space.
   • When you collapse the block, it is removed from keyboard navigation.

Passes if:
Users can collapse the repeated content with the keyboard and reach the main content easily.

Does the document have a heading for non-repeated content?

1. Find where the main content starts.
2. Check that it begins with a real HTML heading such as <h1> through <h6>.
3. Use your browser DevTools if needed to confirm that it is a proper heading element and not text that is styled as a heading.

Passes if:
The main content starts with a semantic HTML heading.

Does the document have a landmark with non-repeated content?

1. Locate the main content area.
2. Check in DevTools that it is inside of one of the following:
   • A <main> element
   • An element with role="main"
3. Make sure that this landmark contains the unique content, not repeated navigation or menus.

Passes if:
The main content is inside a proper main landmark such as <main> or role="main".

If at least one of the four checks is present and implemented correctly on the page, you can mark this check as Reviewed.

For further instructions, visit How to review an accessibility issue.

How to fix it

Ensure that at least one of the review checks is implemented correctly for each failing issue in the HTML code of your website and then mark this check as Reviewed.

For further instructions, visit How to review an accessibility issue.

Additional resources

WCAG success criteria

2.4.1 Bypass Blocks

Other resources

Act rule: Bypass Blocks of Repeated Content

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>