Source order

Definition

Source order is the order in which elements occur in the HTML and DOM. It normally determines linear reading, sequential keyboard focus among native controls, speech output, text-only presentation, and the order available before CSS finishes loading.

Visual layout

Grid, flexbox, positioning, and transforms can display content somewhere else without moving it in the document. A visually plausible arrangement can therefore conflict with screen-reader reading or make keyboard focus jump around the screen. Author the meaningful narrow sequence first and let layout arrange without rewriting the story.

When order can vary

Independent cards may admit more than one meaningful sequence. A recipe step, a form question, a cause-and-effect explanation, or a dialog task usually does not. The requirement is not that source and visual positions be pixel-identical; it is that every programmatic sequence preserve meaning and operability.

Review question

Remove CSS and read the page. Then Tab forward and backward while watching the visual position. Compare the accessibility tree, mobile stack, desktop columns, and DOM inspector. Avoid positive tabindex as a repair for structural order; it creates a second sequence that becomes brittle when content changes.

Repeat the comparison at every layout transition and after dynamic insertion. New banners, errors, and dialog content can introduce order problems even when the initial page is coherent. Record the route, state, viewport, and exact focus movement for any mismatch.