WCAG Principle: Operable
Guideline 2.4: Navigable (Provide ways to help users navigate, find content, and determine where they are)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.4.1 (Bypass Blocks)?
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
This success criterion is about making it easier to skip over repeated content on a webpage. For instance, imagine a website that has a long menu at the top of every page. This guideline says that there should be a way to jump past that menu to the main content. This helps people who use a screen reader or keyboard to navigate quickly. That way, they would not need to go through the same menu every time they enter a new page.
However, adding more skip links isn’t necessary if the browser already offers shortcuts, like navigation links at the page’s bottom. Instead, the focus here is more on avoiding repetitive navigation.
Success Criterion 2.4.1 mainly applies to repeated content on related pages made by the same person or group, not completely different pages. Still, it is advisable to let users skip repeated content on single pages, although this is not compulsory.
Who benefits from options to bypass blocks of content?
- Screen reader users
- People who rely on screen magnification software.
- Keyboard-only users
- Users with cognitive disabilities
How to Meet Success Criterion 2.4.1 (Bypass Blocks)
Common mistakes on websites:
- Not providing a “skip to main content” link at the beginning of pages.
- Broken skip links or links that redirect to the wrong section/content.
- Placing repetitive content at the start of each page without a bypass option.
- Using only visual cues, like color changes, to indicate skip options, which screen readers and keyboards can’t detect.
How to fix these mistakes:
- Include a “skip to main content” link at the top of every page.
- Ensure that skip links are working correctly and lead to the intended part of the page.
- Offer a way to bypass repetitive content like menus.
- Ensure skip links are visible to, and accessible via keyboard, not just with a mouse.
Helpful tips for developers to implement bypass blocks mechanisms:
- Place skip links consistently across all pages to help users predict and find them easily, regardless of screen orientation.
- Ensure skip links are easily usable on mobile devices, considering touch targets and screen size.
- Combine skip links with ARIA landmarks to provide multiple ways to navigate quickly to different sections of the page.
How to test if your website meets conformance:
- Verify the website has skip links at the top for main content, at the start of repeated blocks, and to content areas.
- Ensure your site allows skipping of repeated material through ARIA landmarks, section headings and collapsible menus.
If both checks are true, then your site passes this success criterion.
Bad and Good Examples of Bypass Blocks (Code Snippet)
Code example that fails success criterion 2.4.1
Code Snippet
<html>
<head>
<title>News Website</title>
</head>
<body>
<nav>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#sports">Sports</a></li>
<li><a href="#entertainment">Entertainment</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<h1>Today's Headlines</h1>
<p>Latest news content...</p>
</main>
</body>
</html>
This code snippet lacks a “Skip to Main Content” link which means keyboard and screen reader users must tab through many links to get to the main content. It fails the success criterion because it doesn’t provide a way to quickly bypass the repetitive navigation menu. This makes the website less accessible to users.
Code example that passes success criterion 2.4.1
Code Snippet
<html>
<head>
<title>Blog Home</title>
</head>
<body>
<a href="#main-content" style="position:absolute; top:0;">Skip to main content</a>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main id="main-content">
<h1>Welcome to My Blog</h1>
<p>Here you will find my latest posts...</p>
</main>
</body>
</html>
This code includes a “Skip to main content” link at the very top of the page. This link becomes visible and usable for keyboard and screen reader users immediately upon page load. It allows them to bypass the navigation menu and go directly to the main content. This setup meets the success criterion because it provides an efficient way to skip over repetitive content, making the website more accessible.
Frequently Asked Questions
What is a bypass block?
A bypass block is a website feature that allows users to skip over repetitive content, like menus or ads, and go directly to the main content.
What are repeated blocks of content?
Repeated blocks of content are parts of a website that appear multiple times, usually on different pages. These include navigation menus, headers, footers, and sidebars.
What should I do if my website's layout doesn't allow for a skip link to bypass blocks of repeated content?
Reevaluate the site’s design because accessibility should be a priority, and most layouts can accommodate a skip link with thoughtful planning.
