Some elements have a [tabindex] value greater than 0
Although technically valid, using a tabindex greater than 0 is considered an anti-pattern because it shifts the affected element to the end of the tab order. This unexpected behavior can make it seem like some elements can't be accessed via keyboard, which is frustrating for users who rely on assistive technologies.
How the Lighthouse tabindex audit fails #
Lighthouse flags elements that have a tabindex value greater than 0:
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to fix problematic tabindex values #
If you have a tabindex greater than 0, and you're using a link or form element, remove the tabindex. HTML elements such as <button> or <input> have keyboard accessibility built-in for free.
If you're using custom interactive components, set the tabindex to 0. For example:
<div tabindex="0">Focus me with the TAB key</div>If you need an element to come sooner or later in the tab order, it should be moved to a different spot in the DOM. Learn more in Control focus with tabindex.
Resources #
- Source code for Some elements have a
[tabindex]value greater than 0 audit - Elements should not have tabindex greater than zero (Deque University)