Web Accessibility Criteria - Bypass Blocks

• Introduction
• Best Practices
• Examples
• How to Test for Bypass Blocks
• WCAG 2.1 and References 

 Introduction

Web pages typically repeat content such as sidebars, main menus, heading graphics, social links, etc. Users who use a mouse or a track-pad to navigate a page can easily scroll down to the page and immediately go to the main content. However, users who rely on a keyboard to access information will need to navigate through repeated content before they can reach the main content. This can be a time consuming and strenuous process for a keyboard user. A bypass block provides a keyboard user with the opportunity to skip over repeated content and go straight to the desired information.

Bypass blocks are mechanisms that skip over repeated material on a webpage. They are important for users who navigate with a keyboard because as they will allow users to skip over repeated sections and go to the content they are looking for immediately.

Skip Navigation

Skip Navigation links are a form of bypass blocks typically at the top of the page that direct users to the main content of the web page. Skip Navigation links should always be incorporated into a webpage as they allow users to bypass excessive links, creating easier access to the main information of the page. Skip navigation will ultimately enhance the accessibility of the page by making it easier to access information and therefore enhance the functionality of a web page.

 Best Practices

The best practices for bypass blocks should include the following:

• Provide a skip link on top of the page to skip navigation menus.
• Provide skip links to navigate to content on a large page.
• Ensure the skip link is visible when it receives focus.
• The link text for a skip link should be clear. Examples of good skip link text include: "Skip to Main Content" or "Go to Main Content", etc.
• When providing ARIA landmarks, ensure multiple landmarks of the same type are not provided.
• If provided, ensure to use aria-label to assign unique names to such landmarks “Primary navigation”, “secondary navigation” etc.

 Examples

Example 1: Skip Navigation Button

The example below is a simple example of how a skip navigation functions. The “skip to main content” link will skip over the list of websites and jump to the main content of the page instead. This allows for a keyboard user to bypass the section and get to the main information right away instead of having to go through every single link before getting to the main information.

Example 2: Skip Navigation Invisible Until Clicked

In the example below, CSS is added to make the skip navigation link invisible until it gains keyboard focus. Once it gains focus it becomes visible to a sighted user and will also be read by a screen reader user. The CSS used sets the link at the top left corner of the page. Once tabbed into, it will gain focus and be visible to sighted users. It will also be read by screen readers.

Back To Top 

 How to Test

Testing the bypass blocks requires a keyboard accessibility evaluation. The basic functions to use for a keyboard accessibility evaluation are:

• Tab key to navigate through links and form controls.
• Enter (and /or Spacebar) to select an element.
• Arrow keys are sometimes used for other navigation.

General Test

1. At the beginning of a web page select the "tab" key to check if a skip navigation link is available.
2. Test skip navigation link so it works as intended.
3. Try using a screen reader to make sure a screen reader reads the skip navigation link.

Verify that:

1. A skip navigation is present
2. The skip navigation is functional
3. No useful elements are skipped once the button is clicked.

Back To Top 

 WCAG 2.1 and References