The tab order is the order in which focus (i.e., the ability to accept keyboard input) is assigned to the individual widgets in a form. The user can then, for example, enter text in a text- entry field, use the Tab key to move the focus to a combo box, select an entry here, use the Tab key to move to a push button.
Overview
The
tabindex
attribute has three distinct uses:
tabindex='1'
(or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.tabindex='0'
allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.tabindex='-1'
allows things besides links and form elements to receive 'programmatic' focus, meaning focus can be set to the element through scripting, links, etc.
The tabindex
Attribute
The
tabindex
attribute of 1+ 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.
In theory,
tabindex
should only be used in cases where:
- The default tab order is not ideal, AND
- 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.
An element with any tabindex value of 1+ will receive keyboard focus before elements with no
tabindex
value (or tabindex='0'
).
For example in the following HTML, a sighted user is presented with 4 links in the following order 1. Services, 2. Articles, 3. Resources, 4. Community:
<ol>
<a href='/services/'>Services</a>
<a href='/articles/' tabindex='2'>Articles</a>
<a href='/resources/' tabindex='3'>Resources</a>
<a href='/community/'>Community</a>
</ol>
This is also the order the links will be read to a screen reader. However, the keyboard (and screen reader) navigation order will be 2. Articles, 3. Resources, 1. Services, 4. Community. Elements with defined tabindex values receive focus first, in the order of their values. After navigating past all elements with a defined tabindex value of 1+, (in order), the user will navigate to all other focusable elements, skipping over elements that have already received focus. This unexpected behavior can be especially confusing to screen reader users who are presented with one order when reading a page and with a different order when navigating with the Tab key.
Developers may be tempted to use tabindex as a way to make up for unorganized source code with an illogical navigation order, but we do not recommend the use of positive tabindex values. Instead, fix the navigation order by restructuring the HTML.
0
and -1
Values
tabindex='0'
and tabindex='-1'
have special meaning and provide distinct functionality in HTML. They are also part of the ARIA specification.
tabindex='0'
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>
, <p>
, and <a>
with no href
) to receive keyboard focus. Links and form controls are best for almost all interactive elements, but tabindex='0'
allows other elements to be focusable and able to trigger interaction.
If
tabindex='0'
is used to make elements focusable, the keyboard interaction must be correct for that element, as defined above. This means that elements that are presented as buttons, for example, must respond to both Enter and Spacebar key presses. In some browsers this may require keypress detection with scripting. ARIA role='link'
, role='button'
, aria-expanded='true'
, etc. must often be used to inform screen reader users of the function of the navigable element.
tabindex='-1'
A
tabindex='-1'
value removes the element from the default navigation flow and also allows it to receive programmatic focus. This means focus can be set to it from a link, or with scripting. This may be useful for elements that should not be navigated to, but 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 be able to navigate within the dialog. Because the dialog (probably a <div>
element) is not focusable by default, assigning it tabindex='-1'
allows scripting to set focus to it when it is presented.
A value of -1 may also be useful in complex widgets and menus that utilize arrow keys, or other shortcut keys. This ensures that only one element within the widget is navigable with the Tab key, while still allowing focus to be set on other components within the widget.
Remember that
tabindex='-1'
removes the element from the default navigation flow. Do not assign tabindex='-1'
to any element that must be keyboard navigable, such as a link or button that sighted users can click on with the mouse.