Тестирование доступности: color-contrast и focus

CSS управляет контрастностью цветов, видимостью индикатора фокуса, видимостью элементов (display:none удаляет элемент из дерева доступности) и порядком чтения (визуальное изменение порядка с помощью order во flexbox по сравнению с порядком в DOM). Решения, принятые при создании CSS, напрямую влияют на возможность пользователей с ограниченными возможностями работать с интерфейсом.

WCAG 2.1 AA требует коэффициент контрастности 4.5:1 для обычного текста и 3:1 для крупного текста (полужирный шрифт от 18px или обычный от 24px). Для AAA требуются коэффициенты 7:1 и 4.5:1 соответственно. Эти коэффициенты сравнивают яркость цвета текста на переднем плане с яркостью цвета фона.

Выберите любой текстовый элемент в DevTools → панели стилей. Образец цвета показывает индикатор коэффициента контрастности. Галочка означает успешную проверку, X — ошибку. Палитра цветов показывает на цветовом градиенте линии порогов AA/AAA.

axe-core, Lighthouse и Pa11y автоматически проверяют коэффициенты контрастности всех текстовых элементов. Запускайте axe-core с @axe-core/react во время разработки, чтобы получать предупреждения о контрастности в консоли браузера в режиме реального времени.

CSS outline: none или outline: 0 для :focus удаляет стандартное кольцо фокуса браузера, делая навигацию с клавиатуры невидимой. Это критическая проблема доступности. Вместо полного удаления индикаторов фокуса задайте собственный видимый стиль фокуса.

:focus применяется ко всем событиям получения фокуса, включая щелчки мышью (из-за чего при щелчке появляется видимое кольцо, которое не нравится дизайнерам). :focus-visible применяется только тогда, когда браузер определяет использование навигации с клавиатуры, поэтому пользователи клавиатуры видят кольцо фокуса, а при щелчках мышью оно не появляется.

WCAG 2.2 вводит критерий успеха 2.4.11 (Focus Appearance AA): индикаторы фокуса должны иметь контрастность не менее 3:1 по отношению к соседним цветам и охватывать периметр компонента. Пользовательские стили фокуса должны соответствовать этим требованиям, а не просто присутствовать.

Режим высокой контрастности Windows заменяет цвета CSS заданными пользователем системными цветами. Используйте @media (forced-colors: active), чтобы задать альтернативные стили, работающие в режиме высокой контрастности. Проверьте их через «Параметры Windows» → «Специальные возможности» → «Высокая контрастность».

WCAG 1.4.1 запрещает использовать цвет как единственный способ передать информацию. Состояние ошибки, обозначенное только красным цветом, не соответствует этому критерию. Объединяйте цвет со значками, текстовыми подписями, узорами или подчёркиванием, чтобы информация, не зависящая от цвета, всегда присутствовала.

WCAG 1.4.4 требует, чтобы размер текста можно было увеличить до 200% без потери содержимого. WCAG 1.4.12 требует, чтобы изменение интервала текста (увеличение межбуквенного интервала и межстрочного интервала) не нарушало вёрстку. Используйте относительные единицы (rem, em) для типографики, чтобы выполнить оба требования.

Комплексное тестирование доступности CSS включает браузерное расширение axe DevTools для разработки, Lighthouse CI для автоматических проверок конвейера, Pa11y для проверок страниц из командной строки и ручное тестирование навигации с клавиатуры с помощью Tab/Shift+Tab для проверки видимости и порядка индикаторов фокуса.

Тестирование доступности CSS охватывает коэффициенты контрастности цветов (минимум 4.5:1 для AA), видимые индикаторы фокуса, соответствующие WCAG 2.2, с использованием :focus-visible, отказ от цвета как единственного способа передачи информации, поддержку режима forced-colors и относительные единицы типографики для соответствия требованиям изменения размера. Автоматические инструменты в сочетании с ручным тестированием клавиатуры обеспечивают комплексное покрытие.