bypass-blocks-skip-links

Ensures that the first tabbable or focusable element on a web page is a link to skip to the main content

Description

Web pages often have a skip to main content link placed at the top. This link helps users who rely on keyboard navigation to skip repetitive items such as navigation menus, headers, and other content and directly access the main content.

Also, the skip link element on a webpage should be visible when it receives keyboard focus.

What the rule checks

The rule checks whether or not:

• The first tabbable or focusable element on a web page is a link to skip to the main content.
• The skip to main content link is an anchor element (<a>). Though it is technically accepted to use a button element instead, this rule specifically requires the use of an anchor element.

• The anchor element contains the href attribute specifying the location the link points to. When the link is clicked, the value of the href appends to the web page URL.

Why is it important?

Without the option to skip to the main content, users have to navigate through all the repetitive components before they access the main content.

Example

The following HTML code has the skip to main content link implemented:

After the page loads, users use the Tab key (⇥) to access the link. Then, they use the Return or the Enter key (↵) to access the main content (which starts with About us) directly.

How to fix?

If the check fails, follow these steps to debug:

1. Use the Tab key to check if the skip to main content link is the first focusable element on the webpage.
2. Ensure that the skip link element on the webpage is visible when it receives keyboard focus.
3. Use the Return or the Enter key to ensure the focus shifts to the main content.
4. Inspect your HTML code. You may have to fix the link implementation or the HTML structure.

Reference

• G1: Link to directly access the main content