tabindex
Web validation
tabindex attribute should never be set to a positive number.The natural tab sequence follows the order of elements in the DOM. Giving any element a positive tabindex forces it ahead of that sequence, which may disorient keyboard and assistive-technology users. Reserve tabindex="0" for placing custom widgets in the default order, and tabindex="-1" for elements that need programmatic focus only.
Pass Patterns
Using tabindex="0"
Using tabindex="0" to make a non-native control keyboard-focusable.
<!-- A custom button rendered as a <div> -->
<div role="button" tabindex="0" aria-pressed="false">
Show details
</div>Using tabindex="-1"
Using tabindex="-1" for a section that should receive focus programmatically.
<main id="main" tabindex="-1">
<!-- Main content -->
</main>Fail Patterns
Positive tabindex that jumps past earlier elements
The link is moved ahead of every focusable element that appears earlier in the DOM.
<!-- Skips over focusable items that appear earlier in the DOM -->
<a href="#contact" tabindex="5">Contact us</a>Mix of positive values that creates an unpredictable order
Focus follows the tabindex numbers instead of the visual order, so it moves from the first field to the third, then to the second.
<input type="text" id="first" tabindex="1">
<input type="text" id="second" tabindex="3">
<input type="text" id="third" tabindex="2">Try It Yourself
Using a keyboard
- Load the page in a browser.
- Press the Tab key repeatedly and note the focus indicator’s path.
Expected result: The focus should move in a logical, DOM-based order.
Actual result: Focus jumps unpredictably, maybe even skipping important controls.
FAQ
Why is this validation considered a best practice?
Positive tabindex is technically allowed but almost always degrades usability. It overrides the browser’s reliable focus management and can trap users in confusing loops. Following the natural DOM order keeps navigation predictable across devices and assistive technologies.
Why is this issue marked as Serious?
When focus jumps unexpectedly, keyboard users may miss content or become disoriented, and screen-reader users lose context. This creates a significant barrier to understanding and operating the interface, especially on complex pages.