Make sure tabindex attribute values are not greater than 0

The tabindex rule ensures that tabindex attributes with a value greater than 0 are not used, as they can create confusing and unpredictable tab navigation.

What is being tested?

This rule checks that:

• No element uses tabindex with a value greater than 0.
• Tab order follows the logical flow of the DOM, not an artificially assigned order.

Why it matters

Using tabindex greater than 0 disrupts the natural tabbing sequence, causing:

• Unexpected tab order that disorients users.
• Elements that seem skipped because they were already tabbed early.
• Unintuitive focus movement, especially when combined with complex page layouts or CSS.

How to fix the problem

• Change tabindex values > 0 to 0 to include the element in normal tab flow.
• Remove tabindex and reorder HTML so the DOM flow matches the desired tab order.
• Use tabindex="-1" plus JavaScript when you need an element to be focusable only programmatically.

Examples

Correct use:

<button tabindex="0">Click me</button>
<div tabindex="-1">Focusable only with JS</div>

Incorrect use:

<button tabindex="5">Click me</button>
<a href="#" tabindex="10">Skip link</a>

Best practices

• Let the natural HTML flow control tab order whenever possible.
• Avoid adding tabindex to non-interactive elements like <div> or <span> unless absolutely necessary.
• Be cautious with CSS layouts (like position: absolute or float) as they can visually reorder elements and create confusing tab flows.