2.4.1 Bypass Blocks
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.
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:
<main>
and <nav>
.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:
This section provides some pass and fail 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>
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.
This check primarily affects:
When this check flags a page, confirm that a method exists for users to bypass repeated content.
<main>
, <nav>
, and <header>
.role="navigation"
or role="main"
.This section provides instructions and some examples of how to fix this issue.
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 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 as an extra measure.
For additional support, use ARIA roles:
<nav role="navigation">...</nav>
<main role="main">...</main>
WCAG success criteria
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Thu Mar 13 2025 08:47:37 GMT+0000 (Coordinated Universal Time)