Learn Measure Blog About

Some elements have a [tabindex] value greater than 0

Updated

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:

Lighthouse audit showing some elements 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 native link or form element, remove the tabindex. Native 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

Last updated: Improve article