a11y/positive-tabindex

Why

A positive tabindex moves the element ahead of everything else in the Tab order, so keyboard users jump around the page in an order that no longer matches what they see.

Fix

Use tabindex="0" to make a custom control focusable in source order and tabindex="-1" for something focused only by script. Change the order by changing the DOM order, not tabindex.

Examples

<!-- bad -->
<button tabindex="3">Save</button>
<!-- good -->
<button>Save</button>

Sources

• WCAG 2.2, Understanding SC 2.4.3 Focus Order
• MDN, the tabindex global attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/positive-tabindex