Spacing-only visual grouping does not survive a screen reader's linear read-out

What it is

Proximity is the most common cue used for grouping in an interface: pull a few related fields closer together, push everything else further away, and a sighted user sees at a glance that these belong together. That effect rests entirely on the premise that the distance difference on screen can be seen. A screen reader does not render a picture and has no concept of spacing — it converts content into a linear sequence of speech based on the underlying markup structure, reading items out one after another. If those fields are simply placed next to each other in the markup with no structural relationship or containment tying them together, a screen reader user hears a series of items read in the same order but with no relationship marked between any of them — the information that spacing conveyed visually leaves no trace at all in the read-out sequence.

Why it happens

Grouping works visually because spacing itself, as a physical quantity, carries information: the perceptual system directly reads "closer together" as "more closely related." That mapping happens at the level of perception and is not stored in any data structure. If the implementation simply gave a set of elements a smaller margin so they sit closer together on screen, without using any structure to explicitly mark "these belong to the same group," the entire grouping relationship exists only in the rendered pixel distance, with no structural trace behind it. A screen reader reads that structure, not pixel spacing — a relationship that is not in the structure will not magically appear in the read-out order. This is exactly the typical, and easily overlooked, cause of the "grouped visually, with nothing corresponding in the DOM" problem: a visual review finds nothing wrong, because the reviewer is looking with their eyes; a pass with a screen reader reveals that the grouped content and unrelated surrounding content are read out indistinguishably.

Where it stops holding

If a piece of visual grouping is purely decorative and carries no relationship necessary for understanding the content — say, tightening the spacing slightly between a few independent cards that each already have a clear label, purely for visual polish — the practical impact of a missing structural counterpart is limited. But whenever the grouping relationship itself carries information the content depends on to be understood — which label belongs to which input field, which options belong to the same single-choice group — the missing structure directly causes the content to be read out as a set of fragments with no discernible ownership. This cannot be deprioritized on the grounds that "the proportion of screen reader users is small," because for the affected users this is not a degraded experience — the content is simply incomprehensible.

Applying it

• For any visual grouping done through spacing, if that grouping relationship is necessary for understanding the content, give it an explicit structural counterpart — wrap the grouped fields in a shared semantic container, or link them to each other through attributes that express the relationship — rather than letting the grouping relationship live only in a margin value.
• The most direct way to check an existing page for this problem is to turn off the stylesheet and look at the order and hierarchy of the bare structure alone: if content that visually forms one group turns into a flat list with no discernible relationship once styling is removed, the grouping was done at the visual layer only, not the structural one.
• To verify: have a screen reader actually read through the section and judge, from the read-out order alone, whether it is possible to tell that a set of items belongs together and is distinct from what follows. If it isn't possible, the structure needs to be added back — don't assume that reading all the content in some order is good enough.

Related

• Same group: A2.15.1 Grouping by color alone fails for users with color vision deficiency · A2.15.3 Low-contrast container cues can be entirely invisible to users with low vision · A2.15.4 A critical grouping relationship needs a non-visual, perceivable encoding as a fallback · A2.15.5 Purely visual grouping can fail after zooming or resizing text, once spacing ratios shift
• Nearby: J5.01 Screen readers · J5.09 How screen readers work · H1 Forms
• Search terms: screen reader linearization · semantic structure · accessible grouping