Reading order
The order in which assistive technology reads a page, usually DOM order even when CSS puts the boxes somewhere else.
See it
What it is
Reading order is the sequence in which content is exposed when someone cannot use the page's visual position as a map. Screen readers usually follow the accessibility tree derived from DOM order, so a two-column layout that looks obvious can speak as a scrambled conversation if its markup is arranged for styling instead of meaning.
Check it whenever CSS Grid, Flexbox, absolute positioning, or responsive breakpoints move content around. The logical sequence should still make sense with styles off: heading, explanation, action; question, help, answer. The same DOM order should also support a sensible tab path, even though reading order includes non-focusable content and tab order does not.
Gotcha: the CSS order property and grid placement change pixels, not the underlying sequence assistive technology encounters. The Flexbox spec says so itself, in a Reordering and Accessibility note warning that order and row-reverse are for visual reordering only and must not be used to fix a document whose source order is wrong. Positive tabindex only patches focusable controls and creates a second broken order. Fix the source order first, then make the visual layout follow it at every breakpoint.
Ask AI for it
Audit this page's reading order against WCAG 1.3.2 Meaningful Sequence. Inspect the DOM and Chrome DevTools accessibility tree, then list the content in the order a screen reader encounters it at mobile and desktop breakpoints. Fix every sequence that changes the meaning by reordering the HTML. Remove CSS order values, grid placement, or absolute positioning that makes the visual sequence disagree with that DOM order, and do not use positive tabindex as a patch. Preserve the design with CSS Grid or Flexbox only where the visual layout follows the same logical sequence. Return the corrected markup and both before and after reading order lists.