tabindex 0, -1, and Never Positive

The tabindex attribute decides whether an element can receive keyboard focus and how it fits into the Tab order. It is your dial for focusability.

Links, buttons, and inputs are focusable by default, so you rarely touch tabindex on them. Reach for it only when the native element cannot do the job.

Setting tabindex="0" puts a normally non-focusable element into the natural Tab order, right where it sits in the DOM.

Use tabindex="0" on a custom widget you built from a div or span that must be reachable by keyboard, like a scripted toggle.

With tabindex="-1", an element is skipped by the Tab key but can still be focused from JavaScript using element.focus().

You use tabindex="-1" to move focus to a region after an action, like a results panel, without adding it to every Tab press. 🎯

A positive tabindex like 3 jumps that element ahead of everything, scrambling the order and trapping you in a maze. Avoid it.

Any element with a positive value is visited before all the tabindex="0" and default elements, so the focus order stops matching the visual order.

The cleanest Tab order comes from DOM order itself. Arrange your markup logically and most focus problems disappear on their own.

Adding tabindex="0" to plain text or whole containers creates noise, forcing keyboard users to Tab through stops that do nothing.

Use 0 to add a custom control to the order, -1 to focus by script only, and never a positive number. That covers almost everything.

Which tabindex value makes an element focusable by script but skips it in the Tab order?

You now own the tabindex dial: 0 adds custom controls to the order, -1 enables scripted focus, and positive values are off-limits. 👍