Do not clip text when users override text spacing
A reader applies their own text spacing and your fixed-height box cuts the paragraph in half. F104 is the failure technique for that, and a match is a defect rather than a technique. The four values come from the rule and they are a test rather than a target. Each one is a multiple of the font size. Line height at least 1.5 times it, space after a paragraph at least twice it, letter spacing at least 0.12 times it, word spacing at least 0.16 times it. Nothing may be clipped, obscured or lost when all four land at once. Three things cause it. Overflow set to hidden, absolutely positioned content with nowhere to grow, and borders drawn too tight for the text once the spacing opens up. One exception exists. Languages and scripts that do not use one of these properties can conform using only the properties that exist for them.
How we find it in an audit
A bookmarklet or a user stylesheet applies all four values at once, and Stylus is the browser extension W3C names for the job. Then we read the page. Cut sentences, lines sitting on top of other lines, buttons whose label has spilled past its border. Every break gets screenshotted, because the before and after pair is what makes the finding impossible to argue with. Cards, badges and navigation items get the closest look, since fixed heights cluster there.
How affected users experience it
This is the setting readers with dyslexia and low vision reach for when a page is hard going, and it lives in a browser extension or a user stylesheet rather than in your site. It is a tool of last resort. When the page answers by clipping the text, the reader ends up worse off than before they used it, and the only way forward is to switch their own accommodation off. That is the real cost of this one. Not a broken layout, but a person deciding that reading comfortably is not worth what it does to your site.
Passes vs. fails
Passes
.teaser { min-height: 120px; }Fails
.teaser { height: 120px; overflow: hidden; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- 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
The other techniques filed under this rule
6 guides on this site are filed under 1.4.12 Text Spacing. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
This guide is our interpretation of W3C technique F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted. 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.