F2.14.1source order drives serial traversaldesign

Source order is what assistive tech and the keyboard walk

Aliases: DOM order · document order · tree order

What it is

Layout can paint a button into the visual bottom-right with grid-area, order or absolute positioning while the tree still has it after the footer links. Keyboard and screen readers walk source order (DOM / view tree), not the painting you see. Source is the layout’s input list; vision is a projection of that list. Change the projection, and serial access still follows the list.

How a screen reader builds its buffer, and how browse versus focus mode switch, live in another family. This leaf only locks the layout side: the order you feed the layout engine is the only order the serial channel admits.

Why it happens

Paint follows visual rules; Tab and AT follow the tree. Two projections. Flex order, grid placement, floats, absolute positioning change paint, not the tree. “What looks next” and “what the next keystroke hits” stop being the same object.

Content-first means: rank the tree by the task (title and body before asides), then use layout to paint the aside to the side or below. The reverse — shuffling the tree so the mock looks right — hands the list to the painting, and the serial channel gets a scrambled shopping list.

Where it stops holding

Canvases, games and maps were never a linear list; source order barely applies, and focus wants a spatial strategy. Chart primitives that never entered the tree are outside source order entirely — a different access debt.

If normal document flow already produces the layout, leave order alone. The moment you reach for it, you have admitted the two projections may fork.

Applying it

  • Before painting, rank the source list by the task: the order someone finishes the job is the order of the tree. Place things with the grid; do not shuffle nodes in the tree to match a mock.
  • Treat order and absolute positioning as tools that create a second sequence. When they appear, walk the keyboard path on purpose.
  • How to check: Tab the whole page watching only the focus ring (or with the display off). If the spoken order disagrees with the visual reading order you would give a sighted colleague, list and projection have forked. Fix the tree, do not add another visual patch. Record that path and replay it the next time the grid changes.

Related

  • Same group: F2.14.2 Visual reordering should not rewrite logical order · F2.14.3 When visual order and source order disagree, focus jumps
  • Nearby: J2.08 Reading order · F3.04 Scan patterns · F2.05 Alignment
  • Search terms: source order · DOM order · tab order · flex order

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F2.14.1