Why it matters
Users with dyslexia and low vision often need increased text spacing to read comfortably. If content breaks or clips when spacing is adjusted, these users lose access to information.
Common violations
- Text that overflows or gets clipped in fixed-height containers
- Content that overlaps when line-height is increased
- Buttons or labels that break with increased letter spacing
- Important text hidden behind other elements after spacing changes
Code examples
Bad
.card-text {
height: 60px;
overflow: hidden;
line-height: 1.2;
}Good
.card-text {
min-height: 60px;
overflow: visible;
line-height: inherit;
}How to fix
Use min-height instead of fixed height. Avoid overflow: hidden on text containers. Test with a bookmarklet that applies the four spacing overrides. Use relative units for spacing and ensure layouts accommodate text expansion.
Related criteria
Related resources
Scan your site