- Success Criterion 1.3.2
- Conformance level A
- W3C reference F1
CSS Layout Changes That Scramble the Screen Reader’s Reading Order
1.3.2 — Meaningful Sequence
Scenario
Setting
A dating app's profile setup
What’s wrong
Content is visually re-arranged with CSS so the order you see on screen is different from the order a screen reader reads it — the meaning changes or gets confusing when read aloud.
Example
Here's what happens on a dating app's profile setup: content is visually re-arranged with CSS so the order you see on screen is different from the order a screen reader reads it — the meaning changes or gets confusing when read aloud.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. Here, on a dating app's profile setup, the result is they lose track of what belongs to what.
How to test
Disable CSS (or use a reader-view/outline tool) and read the page top to bottom: if the flow makes no sense compared to the styled layout, it fails.
How to fix
Keep the DOM order aligned with the visual order — do not use CSS positioning to rearrange content in ways that change its meaning.
Outcome
After the fix, the same visitor to a dating app's profile setup can now understand how the page is organized.
Who is affected
Screen-reader and keyboard users who encounter content in DOM order.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Word Spelled Out Letter by Letter Instead of Read as a Word
- Text Columns Faked With Spaces Read Aloud Out of Order
- Layout Table That Reads in a Nonsensical Order When Linearized
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns
- Prices or Labels Positioned Visually Near the Wrong Product in Code