Reading Order

Reading order affects comprehension — content should follow a logical sequence in source and assistive technology.

01 — Purpose

Logical sequence in source and speech

Reading order affects comprehension — content should follow a logical sequence.

Screen readers and keyboard users traverse the DOM in source order — not visual order. CSS grid and flex can rearrange what sighted users see while assistive technology reads something else entirely.

See semantic HTML and keyboard navigation.

02 — Principles

Structure before layout

Visual layout should never break logical structure.

  • meaningful source order — DOM order matches the intended reading flow
  • logical headings — one outline, no skipped levels for styling
  • predictable layout flow — main content before sidebars in source when that matches task priority

03 — Practice

Good reading order

Screen reader and keyboard users rely heavily on reading order.

  • write HTML in reading order first — adjust layout with CSS, not DOM shuffling for AT
  • use tabindex only to fix rare exceptions — not to patch bad source order
  • keep related content grouped — label + input + error together in the DOM
  • test with CSS disabled — does the page still make sense?
  • tab through the page — focus order should match reading order; see focus management

04 — Avoid

Order confusion

Layout-first thinking creates silent barriers for assistive technology.

  • visually reordered confusion — sidebar read before main because of order or grid placement
  • disconnected content structure — headings that do not match section boundaries
  • layout-first thinking — design comp drives DOM order backwards
  • positive tabindex to “fix” tab order — fragile and hard to maintain
  • decorative content inserted mid-flow in source — breaks task continuity

05 — Close

Read it aloud in DOM order

If the source order sounds wrong, the layout is wrong for accessibility.

Linearise the page: read the DOM top to bottom with a screen reader or browser extension. Fix source order before reaching for ARIA reorder hacks.

See semantic HTML, responsive strategy, and the accessibility QA checklist.