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.
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 thehref
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:
- Use the Tab key to check if the skip to main content link is the first focusable element on the webpage.
- Ensure that the skip link element on the webpage is visible when it receives keyboard focus.
- Use the Return or the Enter key to ensure the focus shifts to the main content.
- Inspect your HTML code. You may have to fix 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
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!