Доступность перестала быть «приятным бонусом»: её спрашивают на собесах, требуют крупные заказчики, а дизайн-системы закладывают в компоненты. Актуальная версия стандарта WCAG 2.2 (рекомендация W3C с октября 2023), обычно требуют уровень AA.
Принципы
WCAG построен на четырёх принципах POUR: воспринимаемость, управляемость, понятность, надёжность. Уровни: A (минимум), AA (обычное требование), AAA (повышенный).
Контраст
Контраст считается по относительной яркости цветов:
contrast = (L1 + 0.05) / (L2 + 0.05)
L1 яркость светлого цвета, L2 тёмного, от 0 (чёрный) до 1 (белый). Яркость считается из линеаризованных каналов sRGB с весами 0.2126 R + 0.7152 G + 0.0722 B. Диапазон от 1:1 до 21:1.
Пороги AA:
- Обычный текст: 4.5:1 (критерий 1.4.3).
- Крупный текст (от 24 px или от 18.66 px жирным): 3:1.
- Нетекстовые элементы (рамки полей, иконки-кнопки, состояния): 3:1 (1.4.11).
AAA поднимает пороги текста до 7:1 и 4.5:1. Порог не округляют: 4.48 не проходит.
Примеры на белом фоне: #777777 около 4.48 (не проходит для 16 px), #767676 около 4.54 (проходит), #999999 около 2.85, #595959 около 7.0. Белый на #007AFF около 4.02: для текста 16 px мало, для крупного достаточно. Белый на #FF9500 около 2.2: не годится даже для крупного.
Цвет не единственный сигнал
Критерий 1.4.1: информация не должна передаваться только цветом. Красная рамка у ошибочного поля бесполезна для людей с нарушениями цветовосприятия (чаще всего красно-зелёные) и для скринридера. Нужны текст ошибки и иконка. На графиках подписи линий, маркеры и типы линий, а не только палитра.
Что нового в WCAG 2.2
- 2.4.11 Focus Not Obscured (AA): элемент в фокусе не должен полностью прятаться под липкой шапкой или плашкой.
- 2.5.7 Dragging Movements (AA): у перетаскивания есть альтернатива простым нажатием.
- 2.5.8 Target Size (AA): цели не меньше 24 × 24 CSS px или с достаточным отступом.
- 3.2.6 Consistent Help (A): помощь в одном и том же месте.
- 3.3.7 Redundant Entry (A): не заставлять вводить одно и то же повторно.
- 3.3.8 Accessible Authentication (AA): вход без когнитивных тестов, вставка пароля и менеджеры паролей должны работать.
- Критерий 4.1.1 Parsing удалён.
Что ещё проверить в макете
- Видимый фокус у всех интерактивных элементов (2.4.7). Убирать обводку без замены нельзя.
- Подписи полей видимые, а не плейсхолдеры.
- Иконки-кнопки имеют текст для скринридера.
- Декоративные картинки с пустым alt.
- Текст масштабируется до 200%, на ширине 320 CSS px нет горизонтальной прокрутки (1.4.10).
- Модальные окна: фокус внутрь при открытии, Esc закрывает, фокус возвращается.
Как убедить команду
Доступность помогает всем: контраст читается на солнце, крупные цели снижают промахи, понятные ошибки сокращают обращения. Дешевле всего заложить её в дизайн-систему: контрастные токены, состояния фокуса, правила подписей.
Частые ошибки
- Серый плейсхолдер вместо подписи.
- Ошибка только красным.
- outline: none без замены.
- Брендовый цвет кнопки, не проходящий 4.5:1 с белым текстом.
- «У нас нет незрячих пользователей».
Что спросят на собесе
- Какие пороги контраста по WCAG AA? Посчитайте контраст пары цветов.
- Как вы проверяете доступность макета?
- Что нового в WCAG 2.2?
- Почему цвет не может быть единственным сигналом?
- Как убедить продакта заниматься доступностью?