- Success Criterion 1.3.2
- Conformance level A
- W3C reference F32
Word Spelled Out Letter by Letter Instead of Read as a Word
1.3.2 — Meaningful Sequence
Scenario
Setting
A weather app's forecast screen
What’s wrong
Spaces are inserted between letters to space a word out visually (H E L L O). Screen readers then spell it letter by letter instead of reading the word.
Example
<h2>T O D A Y ’ S F O R E C A S T</h2> Why it matters
A screen reader user hears the heading spelled out letter by letter instead of the words "Today's forecast," making it unintelligible by ear.
How to test
Copy suspect spaced-out text (H E L L O) and check with a screen reader: it will spell out each letter instead of reading the word — confirm real CSS letter-spacing isn't used instead.
How to fix
Use CSS letter-spacing to space out text visually; never insert literal spaces inside a word.
<h2 style="letter-spacing: 0.3em;">Today's Forecast</h2> Outcome
Read aloud, "Today's forecast" now comes through as one clear phrase, not a string of spelled-out letters.
Who is affected
Screen reader users and voice-output tools that read words rather than individual characters cannot recognize the heading as real text.
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
- 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