For users who navigate the web with a keyboard, a logical and predictable tab order is essential. The tabindex attribute can be a useful tool for managing focus, but using a positive value (greater than zero) is a well-known accessibility anti-pattern. A positive `tabindex` manually overrides the natural document flow, creating a confusing and frustrating experience for keyboard users. This guide will explore the dangers of using a positive `tabindex` and how to create a more accessible website.
Think of your website as a well-organized city. The streets are laid out in a logical and intuitive way, making it easy for people to get from one place to another. A positive `tabindex` is like a detour that takes people on a winding and confusing path. It can be frustrating for users, and it can also make it more difficult for search engines to understand the structure of your page. For a deeper dive into the world of accessibility, see our article on accessibility.
Understanding `tabindex` Values
The `tabindex` attribute has three distinct uses, as detailed in the MDN Web Docs. Only two of them are considered a best practice.
tabindex="0": This allows an element that is not normally focusable (like a `<div>` or `<span>`) to be included in the natural tab order, based on its position in the document.tabindex="-1": This allows an element to receive focus programmatically (e.g., via JavaScript) but removes it from the natural tab order. This is useful for managing focus in dynamic widgets.tabindex="1"(or higher): This is the anti-pattern. It creates a separate, ordered tabbing sequence that takes priority over the natural order, creating a disjointed and confusing user experience.
Creating a Logical Tab Order
The best way to fix a positive `tabindex` is to remove it and rely on a logical DOM order. The tab order should follow the visual reading order of the page.
<!-- Before: Confusing tab order due to positive tabindex -->
<form>
<label for="name">Name:</label>
<input id="name" type="text" tabindex="1">
<label for="email">Email:</label>
<input id="email" type="email" tabindex="3">
<label for="message">Message:</label>
<textarea id="message" tabindex="2"></textarea>
</form>
<!-- After: Logical tab order based on DOM structure -->
<form>
<label for="name">Name:</label>
<input id="name" type="text">
<label for="email">Email:</label>
<input id="email" type="email">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</form>For more on the importance of a well-structured website, check out this guide to keyboard accessibility from WebAIM.
Frequently Asked Questions
What is the tabindex attribute?
The tabindex attribute is a global attribute that indicates that an element can be focused on. The value of the attribute determines the element’s position in the sequential tab order.
What is tabindex=’-1′ used for?
A `tabindex=\”-1\”` allows an element to receive focus programmatically (e.g., via JavaScript’s `.focus()` method) but removes it from the natural tab order. This is very useful for managing focus in dynamic widgets like modal dialogs, where you need to move the user’s focus to the dialog when it opens.
Why should I avoid using a tabindex greater than zero?
You should avoid using a tabindex greater than zero because it creates a separate, manual tab order that overrides the natural document order. This is confusing for keyboard users and creates significant maintenance challenges, making it an accessibility anti-pattern.