Web Accessibility: The Tabindex Attribute

Author:
Marcus Harrison
Marcus HarrisonSenior Front-End Developer
Tabindex Attribute

Everyone enjoys the web and the utility it serves in our everyday lives. However, not everyone interacts with the web in the same way. Many users with visual disabilities rely on screen readers and their keyboard to navigate and engage with websites. 

A typical user who navigates the web with a screen reader will tab through key areas of the site using the tab key. This will take them along a path of focusable elements throughout the page in the order in which they appear in the HTML structure of the page. By default, elements such as links, buttons, and form fields are focusable as the user tabs through each page. 

It’s good practice to test your website using only a screen reader and a keyboard. This will help you gauge the experience for someone who is potentially tabbing through your site instead of clicking through it. You may find that the order of elements the tab key takes a user is not in the best sequence. Additionally, you may prefer to adjust what elements are part of, or excluded from the tab sequence. This is where the tabindex attribute comes in handy!

Tabindex

Tabindex is a global HTML attribute that can be added to any element. Depending on its assigned value, tabindex sets the sequence in which elements are focused on. You can also add elements or subtract elements from the tab sequence. 

tabindex=”1 and above”

Elements with a positive integer set for the tabindex will be the first on a page to be focused on. Elements assigned with any positive integer will become focusable starting with the lowest value up to the largest value.

tabindex=”0”

Elements assigned a tabindex=”0” will become focusable within the normal tab sequence. Their place in the sequence will be determined by their location amongst other focusable elements within the DOM. These elements will display in order after any elements containing positive values.

tabindex=”-1”

Elements assigned a tabindex=”-1” will not be focusable within the normal tab sequence. This would be useful if you had an element that was normally focusable that you wanted removed from the sequence. 

Use Cases

With great power comes great responsibility. Just because you can change the tab sequence doesn’t mean that you should. Again, this comes back to testing the user experience for yourself to see what needs to be adjusted, if anything. 

Do you have a use case perfect for the tabindex attribute? If so, let us know in the comment section below. And check out our blog section for more tips and resources.