Focus order

Definition

Focus order is the sequence followed when a person moves through focusable elements, commonly with Tab and Shift+Tab. It should preserve meaning and operability and normally follows the DOM.

Native sequence

Links, buttons, inputs, and other enabled controls enter sequential focus when their native contract calls for it. tabindex="0" can add an appropriate custom target; -1 permits programmatic focus without adding a normal stop.

Visual order

CSS grid and flexbox can display items in a different order without changing the focus sequence. A person may therefore see focus jump around the screen. Fix source order instead of assigning positive tabindex values.

Managed contexts

Opening a modal dialog moves focus inside, keeps background content unavailable, and returns focus to the invoker on close. Dynamic updates usually should not move focus unless a new task context or error summary requires it.

Common failures

• Positive tabindex creates a parallel, brittle sequence.
• Hidden offscreen controls remain focusable.
• A closed layer removes the focused node without recovery.
• Sticky content obscures the active control.
• Visual reordering contradicts task order.

Review question

Can a person move forward and backward through the whole task while focus stays visible, follows what they see, avoids hidden content, and returns predictably after temporary contexts close?

Repeat the sequence after validation errors, dialogs, responsive collapse, and dynamic insertion. The initial page order alone cannot reveal focus recovery defects.