2.4.1 Bypass Blocks

Introduction¶

This check applies to websites that have repeated content on multiple pages. 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.

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.

Common methods to implement this include:

• Skip links, also called Skip to Main Content links.
• Landmark regions that use ARIA or HTML5 elements such as <main> and <nav>.
• Heading structures that enable easy navigation.

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.

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.

Affected users¶

This check primarily affects:

• Blind and visually impaired users who use screen readers to navigate pages.
• Keyboard-only users who tab through elements with a keyboard instead of a mouse.
• Users with cognitive disabilities who benefit from structured navigation.

How¶

How to review for a bypass mechanism¶

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

Step 1: 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.

Step 2: 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.

Step 3: 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