How focus moves
Many people navigate entirely with a keyboard, moving between interactive controls with the Tab key and backward with Shift and Tab. By default the order follows the DOM order, the sequence in which elements appear in the markup. Keeping that order matching the visual layout is the simplest way to make a page predictable.
- Natural order follows source order, so logical markup gives logical focus.
- Only interactive elements like links and inputs receive focus by default.
- Reading order should match focus order so nothing feels out of place.
Controlling the order
The tabindex attribute changes this behavior, and small values matter a great deal.
- A value of zero puts an element in the natural order at its DOM position.
- A value of minus one makes an element focusable by script but skips it in Tab order.
- A positive value forces an element earlier and usually creates confusion.
Why to avoid positive tabindex
Positive tabindex jumps focus to a custom sequence that ignores the visual flow, so users land in surprising places and easily lose their spot.
- Order the DOM correctly instead of patching with positive values.
- Use minus one for elements you focus only through code, such as a dialog.
- Test by tabbing through the page and watching where the ring lands.
Key idea
Keyboard focus follows DOM order by default, so order your markup to match the visual flow and avoid positive tabindex, which scrambles the sequence.