Tabindex is an HTML attribute that controls keyboard focus. It can hurt or support accessibility depending on how you use it.
In this video, learn what tabindex is and three ways to use it to support keyboard accessibility, including:
- Adding elements to the focus order
- Making scrollable elements focusable
- Adding keyboard accessibility to custom components
Transcript
In this video, you’ll learn how tabindex affects keyboard accessibility and when to use it to support accessibility.
Resources to find tabindex instances on your site are linked below.
Let’s get started.
What tabindex is
Tabindex is an HTML attribute that controls keyboard focus.
tabindex=”-1″ removes an element from the tab order. It also makes it so you can set focus to an element with JavaScript.
tabindex=”0″ adds it to the tab order where it appears in the HTML.
And, positive values create a custom tab order, but can hurt accessibility.
Tabindex and accessibility
Typically, you’ll use tabindex=”0” and tabindex=”-1” to support accessibility. You shouldn’t use positive values to rearrange the tab order. Instead, adjust the source code, so it’s in the right order, and do presentation adjustments with CSS.
Here are three ways to use tabindex to support keyboard accessibility.
Use tabindex to set focus on elements
First, you can set tabindex to -1 to set the focus on elements with JavaScript’s focus method.
This is helpful for elements that users wouldn’t navigate to directly using tab, but need keyboard focus set to them. For example, a modal screen that needs focus when it appears, or a form submission error message that needs focus after a form with errors is submitted.
Let’s review an error message that uses this.
This new user form had errors when it was submitted. There is an error message above the form field telling the user the issues.
The <div> that has the error message text also has the tabindex attribute set to -1. Now, you can use JavaScript to set the focus to that error message instead of the top of the page.
Setting the focus to the right spot on the page is helpful for keyboard and screen reader users because keyboard users can now select tab and are right where they need to be – in the error message and form. Otherwise, they might have to start at the top of the page and tab to get back to the form.
And, screen reader users now hear the error message right away and know there is an issue.
Add focus to scrollable elements with tabindex
The next way to use tabindex is to add tabindex=”0” to scrollable containers with the CSS overflow property.
CSS overflow can create scrollable containers, which is an interactive feature a keyboard user needs to focus on in order to scroll.
In most browsers, users can’t tab to a CSS overflow element by default, so the keyboard user wouldn’t be able to focus on the scrollable area to scroll it.
To fix this, give the container tabindex=”0″. Now, it’s part of the tab order, so a keyboard user can access it to scroll.
The scrollable container needs a couple other things to be accessible. First, it needs a label, and second, it needs HTML semantics that explain what the content is. You’ll add an accessible label with either aria-labeledby or aria-label. To explain what the content is semantically, you could use HTML sectioning elements, a landmark role, or a group role.
Let’s review an example of this. A common scrollable overflow area is the terms of use boxes.
In this example, the terms of use scrollable container has tabindex set to 0 so keyboard users can focus on it. It also has aria-labelledby and the role set to group so screen reader users hear an accessible label and it’s semantically emphasized for them.
Help keyboard accessibility when creating custom components
The last way to use tabindex to help accessibility is when you are creating custom and interactive components.
An important thing to remember is to only create custom components when HTML doesn’t already provide that functionality. For example, use a native HTML button, which is automatically added to the tab order. Don’t make a custom div to create a button, which would need additional coding to make accessible.
An example of a custom, interactive component that doesn’t have existing HTML is tabs. Tabs have multiple tab buttons and display one tab panel with content at a time.
Tabs often use tabindex=”-1″ on tab buttons so JavaScript can manage focus on the active tab as users interact with it. They also use tabindex=”0″ on the tab panel to add it to the tab order.
Now that you know when to use tabindex, you’re ready to find it on your website. Use the free WAVE extension to find tabindex on one page at a time or Pope Tech’s free plan – no credit card required – to check up to 25 pages.
Check out the resources below for more information on how to do this, and remember to subscribe for more accessibility tips.
Resources
Learn how to find tabindex instances on your website.
If you’re interested in learning more about HTML that can break or support accessibility (depending on how you use it), check out these resources: