HTML Guide
The tabindex attribute expects a valid integer value, not an empty string.
This attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key) and determine their relative ordering for sequential focus navigation.
This attribute accepts an integer value, where:
- A negative value means the element is not reachable via sequential keyboard navigation.
-
A value of
0means that the element should be focusable in sequential keyboard navigation, after any positivetabindexvalues. The focus navigation order of these elements is defined by their order in the document source. -
A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is,
tabindex="4"is focused beforetabindex="5"andtabindex="0", but aftertabindex="3".
Learn more:
Related W3C validator issues
A descendant element with a tabindex attribute cannot be nested inside an element that uses role="button".
The role="button" attribute marks an element as a button for assistive technologies, but true button elements (using the button tag) should typically manage focus and tab order on their own. Adding a nested element with tabindex inside a role=”button” container can confuse keyboard navigation and accessibility tools. Each tabbable element should have a clear, non-overlapping place in the focus order.
Incorrect example (causes the error):
<div role="button">
<span tabindex="0">Click me</span>
</div>Corrected example 1: Move tabindex to the container
<div role="button" tabindex="0">
<span>Click me</span>
</div>Corrected example 2: Use a native button element
<button>
<span>Click me</span>
</button>Whenever possible, use native elements like button, as they provide correct focus, keyboard, and accessibility behavior without extra attributes or roles. Only use role="button" with proper keyboard and accessibility support if absolutely necessary, and avoid tabbable descendants within such containers.
An <a> element cannot contain a descendant element with the attribute tabindex.
A button element cannot contain a descendant element with the attribute tabindex.