Dostępność

`a11y/no-color-only`

Colour is never the only cue; errors, states, links in text and chart series also differ by text, icon, shape or underline.

poważnaw przeglądarceWCAG 1.4.1 · Afe-a11y-visual

Dlaczego

About one in twelve men cannot tell some colours apart, and screen readers do not announce colour at all. A field marked only with a red border, or a link that differs from the paragraph only by colour, is invisible to them.

Poprawka

Add a second cue: an error message and an icon next to the red border, an underline on links inside text, a pattern or a label on chart series, a check mark on the selected option. axe checks links inside text blocks; a person checks the rest.

Przykłady

/* bad */
.prose a { color: #1d4ed8; text-decoration: none; }
/* good */
.prose a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 0.15em; }

Źródła

WCAG 2.2, Understanding SC 1.4.1 Use of Color

Fakty

Identyfikator: a11y/no-color-only
Waga: poważna
Sprawdzanie: w przeglądarce wymaga wyrenderowanej strony: audit --url
Dotyczy plików: page
WCAG 2.2: 1.4.1, poziom A
Ten sam problem w: axe-core link-in-text-block, Lighthouse link-in-text-block
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/no-color-only