Space letters with CSS, not blank characters
To spread a word out, use the letter-spacing property. Not spaces between the letters. W3C lists C8 as sufficient for 1.3.2 Meaningful Sequence in combination with the general technique of ordering content meaningfully, and gives the reason in one clause. Blank characters change the meaning and the pronunciation of the word. S A L E is four one-letter words to everything that reads text, including search, translation, find-on-page and every screen reader. The same applies to line breaks and tabs pushed between letters for effect. There is a second gain worth having. Spacing set in CSS is spacing a reader's own text-spacing override can act on, and letters separated by literal spaces cannot be pulled back together by any override at all.
How we find it in an audit
This is a reading job and it lives in headings, hero copy and pull quotes, which is where a designer reaches for the effect. We search the source for suspicious single-letter runs and check with a screen reader, because on screen the two versions are identical and only the sound tells them apart.
How affected users experience it
S A L E reads as four letters spelled out one at a time. So does a phone number spaced for looks, and so does a spaced-out brand name in a heading. What was a design flourish becomes a piece of the page a listener has to decode by hand, and on a heading it is the piece that was meant to tell them what the section is.
Passes vs. fails
Passes
<h1 class="spaced">SALE</h1>
<style>.spaced { letter-spacing: 0.4em; }</style>Fails
<h1>S A L E</h1>How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- HTML images contain no textNothing implements this yet
- Important letter spacing in style attributes is wide enoughA tool can check this
- Important line height in style attributes is wide enoughA tool can check this
- Important word spacing in style attributes is wide enoughA tool can check this
Other ways to satisfy this rule
12 guides on this site are filed under 1.3.2 Meaningful Sequence. W3C lists this one as sufficient for that rule only alongside G57, so the pair is what passes and neither half does on its own.
- C6sufficientKeep source order meaningful when CSS repositions content
- C27sufficientMatch DOM order to visual order
- G57sufficientPut content in a meaningful reading order
- H34sufficientKeep mixed-direction text reading in the right order
- H56sufficientFix nested right-to-left text with the dir attribute
- PDF3sufficientFix the reading and tab order in PDFs
This guide is our interpretation of W3C technique C8: Using CSS letter-spacing to control spacing within a word. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.