HTML tabindex Attribute
The HTML tabindex global attribute controls whether an element can receive focus, whether it participates in sequential keyboard navigation, and its relative position in the focus navigation order.
Elements That Use the tabindex Attribute
The tabindex attribute is a global attribute and can be specified on HTML elements. Its effect depends on the element, its normal focus behavior, and the attribute value.
tabindex Attribute Value
The tabindex attribute must contain a valid integer. Negative values, zero, and positive values affect sequential focus navigation differently.
<div tabindex="0">Focusable content</div>Although several integer values are possible, authors should generally use tabindex="0" or tabindex="-1". Positive values can create a focus order that differs from the logical order of the document and should normally be avoided.
Negative Values
A negative tabindex value makes an element focusable while indicating that it should not normally participate in sequential keyboard navigation. The value -1 is commonly used for this purpose.
<div tabindex="-1">Focusable, but normally skipped when tabbing.</div>This is useful for content that needs to receive focus programmatically without becoming part of the normal Tab-key navigation sequence, such as a message or interface region that receives focus after an action.
Using tabindex="0"
A value of 0 makes an element focusable and allows it to participate in sequential keyboard navigation. Its relative position follows the document's normal focus navigation order.
<div tabindex="0">This element can receive keyboard focus.</div>Using tabindex="0" can make an element that is not normally focusable available to keyboard focus without assigning it an artificial positive position in the navigation order.
Positive Values
A positive tabindex value places an element into sequential focus navigation with an explicit relative order. Lower positive values are reached before higher positive values and before elements using the normal navigation order.
<button tabindex="1">First</button>
<button tabindex="2">Second</button>Positive values should generally be avoided. They can make keyboard navigation differ from the visual and document order, which can make a page difficult to navigate and maintain. Arrange interactive elements in a logical document order instead.
Naturally Focusable Elements
Many interactive HTML elements already participate in keyboard navigation without needing a tabindex attribute. Examples include links with an href, buttons, form controls, and other interactive elements.
<a href="contact.html">Contact Us</a>
<button type="button">Continue</button>
<input type="text" name="name">Do not add tabindex="0" to naturally focusable controls simply to make them keyboard accessible. Their native HTML behavior already provides keyboard focus.
Accessibility Considerations
A logical focus order is important for people who navigate websites with a keyboard or assistive technology. In most cases, the focus order should follow the same meaningful sequence as the document content.
Use native interactive HTML elements whenever possible. For example, use a <button> for a button rather than adding tabindex="0" to a <div>. Making a non-interactive element focusable does not automatically give it the keyboard behavior or semantics of a native interactive element.
Avoid positive tabindex values because they can create an unexpected keyboard navigation order that becomes difficult to maintain as the page changes.
Common Mistakes
Do not use positive tabindex values simply to rearrange the focus order. Place interactive elements in a logical document order whenever possible.
Do not assume tabindex="-1" makes an element completely unfocusable. A negative value removes the element from normal sequential focus navigation but still allows it to receive focus in other ways, such as programmatically.
Do not add tabindex="0" unnecessarily to elements that already participate in keyboard navigation.
Do not use tabindex alone to turn a non-interactive element into a replacement for a button, link, or form control. Native interactive elements provide built-in keyboard behavior and accessibility semantics.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The tabindex global attribute is widely supported in current core browsers. Browser and platform conventions can affect some details of focus behavior and sequential navigation.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the tabindex Attribute
The example contains naturally focusable controls and an element with tabindex="0". Click inside the example and use the Tab key to move through the focusable elements.
Summary
The HTML tabindex global attribute controls focus behavior and sequential keyboard navigation. A negative value such as -1 normally removes an element from sequential navigation while allowing it to receive focus, 0 places a focusable element in the normal navigation order, and positive values create an explicit relative order. For accessible and maintainable pages, use native interactive elements and a logical document order whenever possible.