The tabindex attribute
tabindex determines whether an element can receive keyboard focus (Tab) and in what order relative to other elements.
Applies to
global
Values
"0" — focusable in natural DOM order; a positive number — custom order (not recommended); "-1" — programmatically focusable (via JS) but skipped by Tab.
Example
<div tabindex="0" role="button">Custom button</div>
Edge cases
- Positive values (1, 2, 3...) break the natural navigation order and are considered an anti-pattern — it's almost always better to reorder elements in the DOM instead.
- tabindex="-1" is useful for programmatic focus (e.g. a modal after it opens) without adding the element to the normal Tab order.
Accessibility
- Natively focusable elements (a, button, input) don't need tabindex — it's only needed for custom interactive div/span elements.