Avoid positive tabindex values
Overview
Users that rely on keyboard navigation will expect a meaningful sequence when focusing on interactive elements. Links, buttons, inputs, and other controls have tab indexes built in. Adding positive tabindexes, if not managed correctly, can make the user jump all over the page and create a confusing experience.
Best Practices
- Mark up your web content in the order that users should tab through. This should limit the need to include positive tabindexes and help the focus order match the reading order.
- Only include
tabindex="0"if an interactive element doesn't naturally receive focus (example:<span>, <div>)
Pattern Examples
The following video shows what happens when a user tries to tab through a page that contains links with positive tabindex values. (An audio-described video and transcript follow the first video.)
Audio Described Version
Transcript
A user tabs through a list of links out of order, then jumps to the skip to main content link at the top of the page.
Expected Tab Order
- Example Link 1
- Example Link 2
- Example Link 3
- Example Link 4
- Example Link 5
- Example Link 6
Users would expect the focus order to match the order of the list.
Real Tab Order
- Example Link 2
- Example Link 4
- Example Link 6
- Example Link 1
- Example Link 5
- Example Link 3
In reality, the focus would jump around, because the tabindex indicates which link should get focus first.
This also makes the user focus on main content before sending the user to links in the header. This means the user will have to navigate through the header just to get back into the main content.
Inaccessible Example Code
<ul><li><a href="#" tabindex="4"> Example Link 1</a> // fourth tab stop </li><li><a href="#" tabindex="1"> Example Link 2</a> // first tab stop </li><li><a href="#" tabindex="6"> Example Link 3</a> // sixth tab stop </li><li><a href="#" tabindex="2"> Example Link 4</a> // second tab stop </li><li><a href="#" tabindex="5"> Example Link 5</a> //fifth tab stop </li><li><a href="#" tabindex="3"> Example Link 6</a> //third tab stop </li></ul>
Accessible Example Code
<ul><li><a href="#" > Example Link 1</a> // first tab stop </li><li><a href="#" > Example Link 2</a> // second tab stop </li><li><a href="#" > Example Link 3</a> // third tab stop </li><li><a href="#" > Example Link 4</a> // fourth tab stop </li><li><a href="#" > Example Link 5</a> //fifth tab stop </li><li><a href="#" > Example Link 6</a> //sixth tab stop </li></ul>