2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
This applies to native apps by replacing “Web pages” with “screens”.
Requirements (Web only)
- A “Skip to content” link is provided, allowing users to move the keyboard focus directly to the main content area;
- The “Skip to content” link is located at (or close to) the start of the page;
- If the “Skip to content” link is hidden at initially, it becomes visible when it receives keyboard focus.
- The
<main>element is used to represent the main content area of the page.
Why is it important?
This ensures that people who do not use a mouse can quickly and easily reach the primary content of the page.
Summary
Give keyboard and screen reader users a way to go directly to the page’s main content. [Web only]
When content (like a header with navigation links) is repeated at the top of several pages, keyboard users should be able to bypass it and move the keyboard focus directly to the start of the main content area of the page.
Common mistakes
- The
<main>element has been used, but there is no skip link that points to it; - A skip link is provided, but it is always visually hidden and only available to screen reader users.
Design Guide
- Provide visual styles and position for when the link received keyboard focus
- Label the link ‘Skip to content’ (like the BBC) or ‘Skip to main content’ (like Google)
Bypass Blocks Example for Web
- A
aelement with the text “Skip to main content” is placed right at the start (or very near the start) of the page. - The
aelement has anhrefattribute pointing to theidof the page’smainelement. - If that “Skip to main content” link is hidden by default, it becomes visible on
:focus.
Example- “Skip to main content” link
<body>
<a href="#main">Skip to main content</a>
<!-- header and navigation go here -->
<main id="main">
<h1>Main heading on the page</h1>
<p>This is the first paragraph of content on the page</p>
<!-- ... -->
</main>
<!-- ... -->
</body>References
- “Skip Navigation” Links article by WebAIM
- W3C’s detailed explanation with techniques and examples.
- Accessibility Guidelines- Github.io