Inline text must support user spacing overrides
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Layouts must let users expand text spacing without breaking content.
Why this matters and how to fix it
Why this matters
Users with low vision, dyslexia, ADHD, or other cognitive needs may increase text spacing to improve readability. Fixed layouts or clipped text can make content unreadable, reducing accessibility and usability.
How to fix this issue
Do not use fixed heights, line-clamp, or overflow-hidden on text. Ensure that content reflows correctly when users increase line-height to 1.5, letter-spacing to 0.12em, word-spacing to 0.16em, and paragraph spacing to twice the line-height.
Developer guidance
Check that text inside containers, flex rows, and absolutely positioned elements can expand without overlapping or being cut off. Include spacing overrides in regression tests. Avoid truncating text purely for visual layout.
Code examples
Incorrect Implementation
<p style="line-height:1; letter-spacing:0; word-spacing:0; height:20px; overflow:hidden;">Text content</p>Correct Implementation
<p style="line-height:1;">Text content</p>
<!-- Content still displays correctly when user applies spacing overrides -->Real-World Examples
Before
<div style="height:20px; overflow:hidden; line-height:1">Important text that wraps</div> <!-- Text gets cut off if spacing increased -->After
<div style="line-height:1.5">Important text that wraps</div> <!-- Text reflows correctly when spacing increases -->Manual testing
- 1. Increase line-height, letter-spacing, word-spacing, and paragraph spacing according to recommended values.
- 2. Confirm text does not overlap, clip, or become unreadable.
- 3. Check containers with flex, grid, or absolute positioning for proper reflow.
- 4. Ensure scrolling or overflow behavior still works.
- 5. Test across pages and major UI components.
Trusted by organizations across Europe working toward WCAG and EAA conformance