Text is cut off when spacing is increased
Why it matters
Some people need wider letter, word and line spacing. If your layout has fixed heights, their text is clipped or overlaps.
How to fix it
Avoid fixed heights on text containers. Use min-height and let the box grow.
.card { min-height: 12rem; } /* not height */Read the W3C guidance: Understanding 1.4.12 Text Spacing.
Related rules
- Line spacing is tight (WCAG 1.4.12)
- Tight letter spacing on body text (WCAG 1.4.12)
- Click target is smaller than 24 by 24 pixels (WCAG 2.5.8)
- Click target is smaller than 44 by 44 pixels (WCAG 2.5.5)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.