Dostępność

`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.

poważnaw przeglądarceWCAG 1.4.12 · AAfe-a11y-visual

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

WCAG 2.2, Understanding SC 1.4.12 Text Spacing

Fakty

Identyfikator: a11y/text-spacing
Waga: poważna
Sprawdzanie: w przeglądarce wymaga wyrenderowanej strony: audit --url
Dotyczy plików: page
WCAG 2.2: 1.4.12, poziom AA
Ten sam problem w: axe-core avoid-inline-spacing
Uczy jej skill: fe-a11y-visual Contrast, colour, size and reflow
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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