What is Tabindex?
"The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name), and determine their relative ordering for sequential focus navigation." ~ MDN Web Docs
tabindex="0"
Elements with a tabindex="0" attribute are considered focusable, meaning users can navigate to them using the tab key. However, this doesn't change their position in the tab order, which is determined by their location within the Document Object Model (DOM).
tabindex="-1"
Elements with a negative tabindex, such as tabindex= "-1," are excluded from the standard tabbing order, allowing you to programmatically focus them using JavaScript without disrupting the user's navigation flow. Doing so is helpful for dynamically updated elements or elements that users can't directly interact with. For example, an error message can be accessible and highlighted without interfering with the page's tabbing sequence.
tabindex="1" (or any value > 0)
Elements with a positive tabindex, "tabindex=1," for example, override the default tabbing order. The tab key can access the element and be focusable sequentially, but the tabindex value determines that order. For example, tabindex=1, tabindex=2, and so on. The image below highlights how the tabindex value controls the tab order.
Keyboard Focusable by Default
Interactive elements are naturally accessible via keyboard navigation, allowing users to tab through them without additional markup.
Interactive elements like <input>, <button>, <select>, and <textarea> are native HTML elements that can be accessed by the tab key and receive focus by default since they are part of the document's native tab order in the DOM.
Common Mistakes When Using Tabindex
Setting a Manual Tab Order
Avoid manually setting tab orders to ensure a smooth and intuitive user experience. Positive tabindex values should be used cautiously, as they can disrupt the intended navigation flow and cause confusion for users, especially those who rely on assistive technologies like screen readers. Instead, rely on the natural reading order of the content, which is typically the same as the visual layout.
Adding Focus to Non-interactive Elements
Assistive technologies, like screen readers, have built-in methods for navigating and consuming non-interactive content. Unlike interactive elements, which require a tabindex attribute to be accessible to keyboard users, non-interactive elements do not need this attribute. Adding a tabindex to non-interactive elements can create confusion about the element's interactivity, require extra effort for keyboard users, and potentially prevent the element's name and role from being announced, leading to further confusion and accessibility issues.
Appropriate Use of Tabindex
While HTML elements like <input>, <button>, <select>, and <textarea> naturally have focus and tab order, custom controls (created using JavaScript, CSS, or other techniques) might not. Adding tabindex="0" to these custom elements makes them focusable and places them in the standard tab order, allowing users to navigate using the Tab key.
The tabindex attribute is a powerful tool for improving website accessibility. When used correctly, it can help individuals with disabilities navigate your content more efficiently. However, it’s crucial to use tabindex thoughtfully and in conjunction with other accessibility guidelines. By doing so, you create a more inclusive digital experience for everyone.
