Keyboard Accessibility
Tabindex
Overview
The tabindex attribute has three distinct uses:
tabindex="1"(or any number greater than 1) defines an explicit tab or keyboard navigation order. This must always be avoided.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/button 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.
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.
tabindex values of 1+ must be avoided. These elements will receive keyboard focus before elements with no tabindex value (or tabindex="0") resulting in a navigation order that is different from the visual and/or screen reader order. Instead of using tabindex, simply adjust the page's source code order to support a logical navigation and reading order, then use CSS to adjust the visual presentation.
0 and -1 Values
tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML.
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 thus potentially able to trigger interaction.
If tabindex="0" is used to make elements focusable, the keyboard interaction must be correct and intuitive for that element. 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 roles (such as role="button") and attributes (such as 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 interactive elements from the default navigation flow. In most cases, this would not be desirable. If added to something that is not already interactive, tabindex="-1" allows that element to receive programmatic focus. This means focus can be set to it using focus() scripting. This may be useful for elements that should not be navigated to directly using the Tab key, but need to have keyboard focus set to them. Examples include a modal dialog window that should be focused when it is opened, or a form submission error message that should be immediately focused when an errant form is submitted.
A value of -1 may also be useful in complex widgets and menus that utilize arrow keys, or other shortcut keys. It can ensure that only one element within a widget, such as the active tab within a group of interactive tabs for a tab panel, 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.