Ensure tabindex attribute values are not greater than 0

A tabindex value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Lighthouse reports when some elements have a tabindex value greater than 0:

Lighthouse audit showing some elements have a tabindex value greater than 0
Some elements have a `tabindex` value greater than 0.

How to fix this problem

Using a tabindex greater than 0 is considered an anti-pattern because screen readers navigate the page in DOM order, not tab order. Any tabindex greater than 0 jumps the element to the front of the natural tab order. This unexpected tab order can give the appearance of skipping some elements entirely.

If you have a tabindex greater than 0, and you're using a native element, remove the tabindex all together. 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 zero. For example:

<div tabindex="0">Focus me with the TAB key</div>

If you need an element to come sooner in the tab order, it should be moved to an earlier spot in the DOM. Learn more in Control focus with tabindex.

More information

Last updated: Improve article