Skip to main content

bypass-blocks-skip-links

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

Severity: Serious

Description

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

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 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.

Most websites have cookie acceptance/rejection process implemented. If that is true of you, the rule is designed to check if the next focusable element is the link to skip to main content.

  • 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 main content, these 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:

HTML
Copy icon Copy snippet

Skip to main content link

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

How to fix?

If the check fails, it is flagged in your test results. To fix it:

  1. On the relevant page, use the Tab key to check if the skip to main content link is the first focusable element.
  2. If yes, use the Return or the Enter key to make sure the focus shifts to the main content.
  3. If yes, then inspect your HTML code. You may have to make adjustments to the link implementation or the HTML structure.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy