³ÉÈËÂÛ̳

The tabindex property and attribute, as defined in the HTML specification, determines whether or not and in which order actionable elements receive focus when a user interacts using a keyboard or alternative input technologies such as eye tracking, switches, or swiping.

---

Recommendations

Use the order of the HTML markup to create a logical tab order, rather than positive tabindex values.

Don’t use a tabindex value of 0 on elements that are not focusable by default.

Use a tabindex value of -1 if an element is not focusable by default and needs to programatically be given focus.

---

Why it matters

Typical ³ÉÈËÂÛ̳ HTML documents are made up of several shared components (global navigation, page content, share tools, location service widgets, etc.); and no one component has complete awareness of everything that is included in the document or when page content updates. Positive tabindex values can result in an unpredictable and unintended tab order, which is less likely if the default tab order determined by the order of the HTML markup is used.

Using tabindex="0" with an element adds it to the default document tab order. However, it doesn’t change the element type to be actionable or make it discoverable when navigating by link or form elements. It also doesn’t bind click and keypress event handlers to an element, which would then appear to be interactive when it may not be. In all circumstances, it is best practice to use a natively focusable control such as <a> or <button>.

Using tabindex="-1" will remove an element from the document tab order, so a user will not navigate to the element unnecessarily. Because it doesn’t add an element to the document tab order, it can also be used to move focus to an element programatically. This can be useful for managing focus when content is dynamically added after a user interaction, such as an error message, or moving focus to a container if there isn’t a suitable interactive element, such as an expanding menu or FAQ component.

Examples

Recommended:

<a href="/news">News</a>
<button type="submit">Search</button>
<div tabindex="-1"></div>

Not recommended:

<a href="/news" tabindex="1">News</a>
<button type="submit" tabindex="3">Search</button>
<div tabindex="2"></div>
<div tabindex="0"></div>

Testing

Check that there are no instances of positive tabindex values in the source code.

Visualise the tab order, using a tool such as or . Check that all highlighted elements are focusable via keyboard, and aim for an order that makes sense.