WebsightWhat it asks for, in plain English
Some people read better with more air around the letters, and they use browser extensions or their own stylesheet to get it. Your page has to cope when they set line height to 1.5 times the font size, space after paragraphs to twice the font size, letter spacing to 0.12 times the font size and word spacing to 0.16 times the font size, all at once.
Coping means nothing gets cut off, nothing overlaps and nothing stops working. The layout is allowed to get longer. You do not have to apply these values yourself; you have to not break when a reader does.
The usual failures are fixed-height boxes with hidden overflow, buttons and tabs with a set width, and inline styles that pin the spacing with !important so the reader's change is ignored. Text in images and canvas is not covered, which is one more reason to avoid images of text.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.12 page has the full intent, techniques and definitions.
Who it affects
Someone with dyslexia sets wider letter and line spacing to stop the words swimming, and then finds the last line of every card has vanished.
A person with low vision uses larger line height to keep their place and finds buttons where the label has spilled outside the border.
Anyone with a tired eyes at the end of the day benefits from the same breathing room.
Example
This frame applies the spacing a reader might ask for. The card has a fixed height, so the end of the message is simply gone.
Same spacing, but the card uses min-height and grows to fit. Every word is there.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}.card{height:72px;overflow:hidden;background:#fef3c7;padding:12px;border-radius:8px;width:300px}p{margin:0;line-height:1.5;letter-spacing:.12em;word-spacing:.16em}</style>
<div class="card"><p>Your table is booked for Saturday at 7pm. Please arrive ten minutes early and let us know about any allergies.</p></div><style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}.card{min-height:72px;background:#fef3c7;padding:12px;border-radius:8px;width:300px}p{margin:0;line-height:1.5;letter-spacing:.12em;word-spacing:.16em}</style>
<div class="card"><p>Your table is booked for Saturday at 7pm. Please arrive ten minutes early and let us know about any allergies.</p></div>How to check it
- Install a text spacing bookmarklet or extension (several free ones apply exactly the WCAG values), or add a user stylesheet with line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em and paragraph margin 2em.
- Apply it to each key page and scroll through, looking for text cut off at the bottom of boxes, overlapping lines, and buttons or tabs whose labels have broken out.
- Check menus, cards, tables and form hints, which are the usual fixed-size suspects.
- Try the main tasks with the spacing still applied.
What Websight checks for 1.4.12
Websight runs this automated check for 1.4.12:
Websight's inline spacing check flags inline styles that force letter, word or line spacing with !important, which stops a reader's settings taking effect. Whether the layout survives those settings is something only a person can see.
Practical tips
- Use min-height instead of height, and let widths be flexible, on anything containing text.
- Do not set overflow: hidden on text containers unless you have checked what gets hidden.
- Never pin line-height or letter-spacing with !important in inline styles.
Other criteria in guideline 1.4, Distinguishable
- 1.4.1 Use of Color (level A)
- 1.4.2 Audio Control (level A)
- 1.4.3 Contrast (Minimum) (level AA)
- 1.4.4 Resize Text (level AA)
- 1.4.5 Images of Text (level AA)
- 1.4.10 Reflow (level AA)
- 1.4.11 Non-text Contrast (level AA)
- 1.4.13 Content on Hover or Focus (level AA)