Level AWCAG 2.2
1.3.2 Meaningful Sequence
When the sequence of content affects its meaning, a correct reading sequence can be programmatically determined.
Why it matters
Screen readers
Screen readers read content in DOM order, so rearranging with CSS can make the meaning incoherent.
Keyboard navigation
The Tab key follows DOM order. When it diverges from the visual order, users get confused.
Cognitive impairment
A logical reading order aids comprehension. When order breaks, context is lost.
Responsive design
Even when the layout changes with screen size, preserving a meaningful order is essential.
Live demo
DOM order and visual order
DOM order (screen reader reading order)
1. Heading
2. Body
3. Sidebar
4. Footer
Reordered visually with CSS
3. Sidebar← Visually first
1. Heading← Visually second
4. Footer← Visually third
2. Body← Visually fourth
If CSS
order or position: absolute changes the visual order, it no longer matches the screen reader reading order and can make the content harder to understand.Understand through a persona
Takahashi (40) — Totally blind
Reads news sites with a screen reader. When CSS places the sidebar first in the DOM, ads are read endlessly before the headline, exhausting him before he reaches the article.