Keyboard Accessibility
Tabindex

Overview

The tabindex attribute allows web developers to customize the tab/navigation order of web content. Most of the time, tabindex is not necessary. It should only be used in cases where the default tab order is not ideal and when the tab order cannot be changed by rearranging items in the content and/or by altering the style sheet to reflect the best visual arrangement. These cases are rare. In almost all circumstances, WebAIM recommends against using tabindex.

The tabindex Attribute, According to Specification

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

The tabindex attribute is added to HTML elements, as in the example below:

<a href="http://webaim.org/" tabindex="1">WebAIM.org</a>
<form action="submit.htm" method="post">
<label for="name">Name</label>
<input type="text" id="name" tabindex="2">
<input type="submit" id="submitform" tabindex="3" value="Submit">
</form>

Elements with defined tabindex values are navigated first on the page, in order of their values. In the example above, the webaim link will be the first link on the page to receive keyboard focus (i.e., the first thing tabbed to on the page). The Name text box would be second and the Submit button third, and so on. As soon as all elements with a defined tabindex value have been navigated to (in order), then the browser will begin navigating all other focusable elements (links and form controls) that do not have tabindex defined.

Note

In this example above, the default/natural navigation order (defined by the source code order) is the same as that defined by tabindex. In most cases, this default order will be logical, thus removing any need for tabindex. When possible, you should always restructure your source code to provide a logical, natural tab order rather than using tabindex.

0 and -1 values

tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting. This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them. A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

Important

Because tabindex="-1" removes the element from the default navigation flow, care should be taken to ensure that it is not assigned to any element that should be keyboard navigable, such as a link or button that sighted users can click on with the mouse.

Drawbacks to tabindex

The main problem with tabindex is that it can create an illogical tab order, even though its very purpose is to ensure that the tab order is logical. For example, even if it might make sense to the developer to have the user tab halfway down the page to a specific link rather than to the main navigation, the user may get confused. It is best not to surprise the user with unexpected behaviors. Screen reader users are especially susceptible to getting confused at illogical tab orders. For one thing, an altered tab order creates a situation in which the normal reading order does not match the tab order. Sighted keyboard users may become disoriented as the navigation seemingly jumps around the page.

The other reason that tabindex can be a drawback is that developers may be tempted to use it as a way to make up for sloppy or illogical navigation order, which is based on the source code. The best way to fix tab order and reading order is to alter the order of the content in the markup itself, rather than try to hide the problem by using tabindex, then use CSS, if needed, to control the visual presentation.

Can tabindex be used legitimately to enhance accessibility? Yes, but because those instances are very rare, it is probably best to pay more attention to the actual reading order, and forget about tabindex entirely.