- Success Criterion 1.3.2
- Conformance level A
- W3C reference F33
Text Columns Faked With Spaces Read Aloud Out of Order
1.3.2 — Meaningful Sequence
Scenario
Setting
A news outlet's article page
What’s wrong
Spaces/tabs are used to fake side-by-side columns in plain text — read aloud, the lines interleave into nonsense.
Example
A news outlet's article page shows the problem clearly: spaces/tabs are used to fake side-by-side columns in plain text — read aloud, the lines interleave into nonsense.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. In this case (a news outlet's article page), they can't tell what's going on without extra effort.
How to test
Copy the 'columns' into a plain text editor: if built with spaces/tabs, the lines interleave into nonsense when read linearly.
How to fix
Use real layout (CSS columns/flex) instead of whitespace so the reading order stays linear and sensible.
Outcome
Once corrected, a news outlet's article page lets them navigate the content in a sensible order, specifically for the “Text Columns Faked With Spaces Read Aloud Out of Order” issue on a news outlet's article page.
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
- CSS Layout Changes That Scramble the Screen Reader’s Reading Order
- Word Spelled Out Letter by Letter Instead of Read as a Word
- 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