Chapter 19: Bypass Blocks

Every website will have repeated blocks of elements in most of the pages. It would be painful for a user who depend on a keyboard to reach the main content of the page bypassing all the repeated elements with the tab key. They may have to press the tab key many times before reaching to the main or required content. Screen reader users have to press tab as well as have to hear a lot of redundant information before reaching the main content. Low vision people have to search for the region where the main content begins with their magnifier.

Though the primary intention of this success criteria is to enable the assistive technology users and keyboard only users to quickly reach the primary content region, the success criteria also talks about the skip of sections in lengthy pages and skipping directly to a particular section. E.g. In this page the email subscription section is after the main content almost in the footer region. However the user can reach the section by just activating the link “Skip to email subscription” available at the beginning of the page.

The use of proper heading structure and ARIA landmarks can also solve this problem.

Validation of bypass blocks

1. Open the page in the browser.
2. At the beginning of the page check for an option that keyboard only user can use to jump directly to the primary content region. E.g. Link such as skip to main content.
3. If available activate it with space key or enter key and check if the focus moves to the primary region of the page.
4. If this mechanism is not available check for
   1. proper heading structure using Paul Adam’s headings book marklet.
   2. If headings are not provided check for landmarks using Paul Adam’s Landmarks bookmarklet. .
5. Having any one of these is sufficient to pass this success criteria but having more than one of these is recommended as different users depend on different navigation mechanism.

Validation with Screen reader

1. Open the page on the browser when the screen reader is on.
2. Tab to the web page from the top. (navigate to the top of the page using control + home).
3. You should here a skip link such as “Skip to main content” in first 3 tabs.
4. Once you here “Skip to ‘link’” press space or enter keyto reach to the primary content section.
5. Press NVDA + up arrow, you should hear either the main heading of the page or a similar content that represent the primary content section. (NVDA + up arrow reads the content NVDA has current focus).

1. If this is not available:
2. Check for heading structure on the page. Use heading shortcut “h” with NVDA on
3. or press NVDA + f7 (function key 7) to pull the elements list dialog. Select the headings from the choices.
4. The headings must be hierarchical in structure allowing the users to jump to the desired section.
5. Also check for the use of landmarks on the page. Use the shortcut “d” to move between different landmarks.
6. Or use NVDA + f7 (function key 7) to open NVDA elements list dialog. Select the landmarks from the choices. Check for prominent landmarks such as banner, navigation, main, complimentary and contentinfo.

Having skip link or proper heading structure or landmarks is sufficient to satisfy this technique, however having more than one way of bypass technique help different user groups.

WCAG Success Criteria

2.4.1 Bypass blocks