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, users may 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.
A good focus sequence lets users tab through elements in the same order they see them visually - you can test this on the page’s live demo. When focus order mismatches visual layout, keyboard users may land on unexpected controls - avoid this by keeping DOM structure aligned with design.
Focus sequence defines the order users encounter elements with the Tab key, and aligning it with visual reading order prevents navigation surprises. You can test this concept live on this page - the demo lets you experience focus sequence in action without relying on external tools or screenshots.
Focus sequence is the path the Tab key takes - and it should match visual reading order to feel natural. You can test this focus sequence in the interactive demo on this page - no screenshots, just real keyboard navigation.
Focus sequence determines how users navigate with the Tab key - when it matches visual order, it feels intuitive; when it doesn’t, users can get lost. You can test this concept live on this page using the Tab key - observe how the focus sequence aligns with layout to avoid unexpected jumps.