accessibility
Focus order
What is focus order?
Focus order is the sequence the Tab key follows across a page. When it matches visual order, navigation feels natural; when it doesn’t, each tab can jump unexpectedly.
Also known as: tab order, tabbing order, keyboard focus order
Prefer to watch?
Watch the recap 0:29
The demo
Click "start", then press Tab to move through this form. Watch the "focus is on" line - in scrambled order it jumps around; switch to natural order and it simply walks down.
Focus isn't in the form yet. Click "start", then press Tab.
What this demo shows (text version)
A contact form with five controls in the visual order: name, email, subject, message, send. In "scrambled" mode the Tab key visits them in a different sequence - email, message, name, subject, send - because each field carries a positive tabindex that overrides its place in the page. A running line announces which field has focus, so the jumps are clear.
Switching to "natural" order removes those overrides, and Tab then walks straight down the form, matching what you see. A focus order that fights the visual order forces keyboard and screen-reader users to rebuild the layout in their head on every press. The fix is to order your markup the way it should be read and never reorder it with tabindex.
Let the Tab key follow visual reading order. Keep DOM order aligned with layout and avoid positive tabindex values - keyboard users should navigate without surprise.
In the scrambled form, Tab sent you bouncing - email, then back up to name, then down past the message to the button - and you lost the thread of where you were. Switch it to natural order and the same keypress just walks down the form, the way reading does. That quiet predictability is the whole job of focus order.
Scrambled focus order almost always comes from positive tabindex values (tabindex="2", tabindex="3"...) bolted on to force a sequence. They override the natural DOM order and create exactly the chaos you felt. The fix is usually to delete them all and let the source order do the work - put the markup in the order people should meet it.
My rule: order your HTML the way you want it read, then style position with CSS - never reorder with tabindex. A sighted mouse user may never notice a broken sequence; someone tabbing through, or using a screen reader, lives in it. The visual order and the focus order should be the same order, always.
Positive tabindex isn't the only thing that breaks focus order. CSS can pull the visual order away from the source order all on its own: a flexbox order property, row-reverse, grid placement or absolute positioning can move a control on screen while its place in the DOM - and so its place in the tab order - stays exactly where it was. You end up with a tidy-looking layout where Tab still jumps, and not a single stray tabindex to blame. The cure is the same one: fix the source order first, then let CSS lay it out without crossing the wires.
Focus order is a tested requirement, not just a nicety - it's WCAG 2.4.3 (Focus Order, Level A), which asks that focusable things take focus in an order that preserves meaning and operability. You don't need a tool to check it. Put the mouse away, start navigating by keyboard, and Tab from the top of the page to the bottom while you watch the focus ring. If it ever leaps backward or skips ahead of where you're reading, the order is broken. On a long page a skip link is the companion fix - it shortens the journey before tab order even comes into play.
Two close cousins finish the picture. Focus order is the path Tab takes through what's already on the page; the moment the interface changes - a dialog opens, a fresh view loads - you also have to move focus deliberately and send it back afterwards, which is focus management. And wherever focus can land, it has to be able to leave again: a component that swallows Tab and won't give it back is a keyboard trap. Get all three right and a keyboard user is never lost, never stranded, and never thrown somewhere they didn't expect.