Accessibility

`a11y/text-spacing`

Text survives line height 1.5, paragraph spacing 2em, letter spacing 0.12em and word spacing 0.16em without being cut off.

seriousbrowserWCAG 1.4.12 · AAfe-a11y-visual

Why

People with dyslexia or low vision use extensions that widen spacing. Boxes with a fixed height and overflow: hidden, or inline spacing marked !important, then clip words or stop the override from working.

Fix

Let text containers grow: min-height instead of height, no overflow: hidden on blocks of text, no !important on line-height, letter-spacing or word-spacing in inline styles. Test with a text spacing bookmarklet on the changed pages.

Examples

/* bad */
.card-title { height: 3rem; overflow: hidden; }
/* good */
.card-title { min-height: 3rem; }

Sources

WCAG 2.2, Understanding SC 1.4.12 Text Spacing

Facts

Id: a11y/text-spacing
Severity: serious
Check: browser needs a rendered page: audit --url
Applies to: page
WCAG 2.2: 1.4.12, level AA
Same problem in: axe-core avoid-inline-spacing
Taught by the skill: fe-a11y-visual Contrast, colour, size and reflow
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/text-spacing