Visual layout is invisible to the screen reader
Aliases: layout invisible to AT · visual composition · unseen layout
What it is
An “order card” is a rounded, shadowed slab to the eye. The screen reader never hears that shadow. Visual layout — columns, alignment, tinted blocks, card chrome — is invisible to the reader. It gets objects, not a pixel composition.
Why it happens
Layout is computed for eyes: who lines up with whom, who sits to the right, who shares a background. Those relations live in style, not in the objects that get spoken. The reader will not say “the last three lines belong to one card” unless the structure actually has a group, a heading, or a landmark.
Designers encode “related” mainly as spatial composition; reader users never receive that code. The failure is not merely scrambled order — order can be fine and grouping still missing. A label on the left and a field on the right look paired; they may be heard as all labels, then all fields. Four metrics in a row on a dashboard sound like four unaffiliated numbers. Columns, cards, and flush alignment treated as semantics are a more common gap than decorative whitespace.
Studying it
Give the same page to people who can see it and people who can only hear it. Ask both to mark “what belongs together.” Compare grouping, not reading order.
Independent variables: columns, card containers, label placement relative to controls. Dependent variables: grouping agreement, mismatched label–control pairs, reports of “I don’t know which item that sentence belongs to.”
Listen with a reader and inspect whether the accessibility tree has groups. Do not inspect boxes on the comp.
Where it stops holding
If the user can still see the screen (low vision plus a reader), layout cues come back in part and the claim weakens. When related content lives in a real list, table, group, or under a heading, invisible layout is not fatal — structure is doing the grouping. Purely decorative visual rhythm was never meant to carry a relation; not hearing it is not a defect. Do not treat “order is wrong” and “grouping was never encoded” as the same failure.
Applying it
- Whatever looks grouped must also be grouped in structure: labels tied to controls, cards with headings, side-by-side metrics under one section heading.
- Do not use columns or tint alone to say “this is a pair / this is a set.”
- How to check: listen through the form and the dashboard, pause, and ask “which item does that sentence belong to.” Every unanswered pause is layout speaking in place of structure.