WCAG SC 2.4.1 Bypass Blocks requires a mechanism that allows users to bypass blocks of content repeated on multiple web pages. This ensures that users, especially those using assistive technologies, can efficiently navigate to the main content without having to go through repeated elements like navigation menus or advertisements on each page.
To provide a skip mechanism that enables users to bypass repeated content blocks and jump directly to the main content or other significant sections of a web page.
For users who utilize the mouse, it is easy to jump to the main content of the page by moving the cursor. However, for users who utilize the keyboard, if there is no mechanism available to skip blocks and landmarks, such as the main navigation bar, they will be compelled to navigate through the entire navigation menu, which may contain dozens of links, before reaching the main content. This process may occur on every page, highlighting the importance of incorporating “skip blocks” mechanisms.
Provide skip link for navigation: Provide a skip link at the top of the page to bypass navigational menus.
Use skip block for large pages: Use skip block to navigate to specific sections on large pages.
Ensure visibility of skip blocks: Ensure that skip blocks are visible when they receive focus.
Clearly describe skip link purpose: Clearly describe the purpose of the skip link, such as "Skip to main content" or "Skip navigation."
Use ARIA landmarks and semantic HTML: Use ARIA landmarks and semantic HTML to define different regions of the page, and ensure unique names are assigned to multiple landmarks of the same type using aria-label, such as "Primary navigation" or "Secondary navigation." This will facilitate the navigation experience for visually impaired users using screen readers, as they can navigate between shortcuts via their software through landmarks, headings, and links.
Example: An online newspaper with multiple sections.
A newspaper website contains multiple sections, including a search function, corporate banner, sidebars, and minor stories. There is no mechanism to skip directly to the lead story, forcing users to tab through all the sections repeatedly.
Explanation:Without a skip mechanism, users, especially those with disabilities, have to navigate through all repeated content to reach the main story, making the site difficult to use.
The first link that the user reaches when tabbing through the page is titled "Skip to Lead Story." Activating the link moves visual focus to the main story. Pressing tab again takes the user to the first link in the main story.
Explanation:Providing a "Skip to Lead Story" link allows users to bypass the repetitive content and jump directly to the main story. By ensuring the skip link is visible and clearly labeled, users can easily understand its purpose and use it to navigate the page efficiently.