Elements should not have tabindex greater than zero
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Keyboard-only and assistive technology users rely on predictable tab order to navigate a page. Using positive tabindex values (greater than 0) breaks the natural focus flow and can make interactive elements hard to reach or skip others entirely.
How to fix this issue
Avoid using `tabindex` values greater than 0. Use natural DOM order and semantic HTML to determine focus sequence. If you must manage focus, use `tabindex="0"` to include elements in the normal flow or `tabindex="-1"` for programmatic focus only.
Developer guidance
Audit focusable elements using browser dev tools or accessibility tree inspection. Ensure that focus moves logically through the page without unexpected jumps. Use automated tests (axe-core, jest-axe) to detect nonzero tabindex values.
Code examples
Incorrect Implementation
<button tabindex="5">Submit</button>
<input type="text" tabindex="2" placeholder="Name">Correct Implementation
<button>Submit</button>
<input type="text" placeholder="Name">
Trusted by organizations across Europe working toward WCAG and EAA conformance