In plain English
When you Tab through a page, the focus should travel in a sensible order, generally matching how the page reads: top to bottom, left to right. If Tab suddenly jumps from the header to the footer, then back up to the middle, people lose their place and can make mistakes, like submitting a form before filling it in.
Two things usually break it: forcing a custom order with tabindex numbers, and
CSS that rearranges content visually while the code order stays different.
Who this is for
- Keyboard and screen-reader users, who experience the page in focus order, not by glancing around.
- Anyone filling in a form or checkout, where a jumbled order causes errors.
What “good” looks like
Let the natural document order drive focus, and move focus deliberately when you open overlays.
<!-- Good: fields in the order people fill them, no forced tabindex -->
<label for="first">First name</label><input id="first">
<label for="last">Last name</label><input id="last">
<label for="email">Email</label><input id="email">When a modal opens, send focus into it; when it closes, return focus to the control that opened it.
Where stores get it wrong
Positive tabindex values scattered through a theme, checkout steps where focus
jumps out of order, and modals that open without moving focus, so the next Tab
lands on the page hidden behind them. See the
common failures list for the
patterns that trip stores up.