What does this accessibility issue mean?
Accessibility issue summary: Tabindex attribute is greater than 0
The tabindex attribute is used in HTML to define the order in which elements receive focus when users navigate a webpage using the keyboard. This attribute is crucial for keyboard operability for website accessibility.
By specifying the tabindex value for an element, web developers can control the sequence in which users can navigate through interactive elements, such as links, form fields, and buttons, using the “Tab” key on the keyboard.
When tabindex values are set greater than 0, it can disrupt the natural flow of keyboard navigation, potentially causing confusion and difficulties for users, especially those relying on assistive technologies.
A positive tabindex value explicitly modifies the default tab order, and excessive or arbitrary values can lead to an unpredictable and non-intuitive experience for individuals with disabilities, impeding their ability to navigate and interact with web content seamlessly.
Therefore, adhering to best practices and allowing the browser’s default tab order or using positive tabindex values when necessary contributes to a more accessible and user-friendly web experience for all.
Example HTML violation: Tabindex attribute greater than 0 (A11y Best Practice Violation)
<a tabindex="1" href="#content">Skip to content</a>
<div id="content" tabindex="-1">
<h1>My Website</h1> This is some content.
</div>The above HTML violates the tabindex accessibility rule because the anchor tag has a tabindex value greater than 0.
This is discouraged because it disrupts the natural tab order of the HTML elements.
To address this issue, there are two options:
Option 1: Adjust the tabindex of the anchor element to 0. This allows users to still focus the element using the keyboard while maintaining a natural tab order.
Option 2: Completely remove the tabindex attribute from the anchor. This preserves the default tab order.
For simplicity, let's focus on Option 2. It is important to note that wrapping the content that follows the "skip to content" link in a 'main' tag would better represent the structure of the content.
How to fix "Tabindex attribute greater than 0 (A11y Best Practice Violation)" issue
<a href="#content">Skip to content</a>
<main id="content" tabindex="-1"></main>
<h1>My Website</h1> This is some content.This modification should solve the accessibility violation.
Do note that further testing is recommended to ensure optimal accessibility. For further understanding of accessibility guidelines, make sure to check the following resources:
-
ACT Rules - particularly on tabbed navigation
-
Information about setting tabindex for accessibility compliance.
Please do not forget to validate the page after making these changes.
