Some elements have a [tabindex] value greater than 0

Some elements have a [tabindex] value greater than 0

Appears in: Accessibility audits

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 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 #

Last updated: Improve article