WCAG 2.2 на практике: контраст, фокус и размер целей

Что изменилось в WCAG 2.2

Версия 2.2 обратно совместима с 2.1: всё, что соответствовало прежним требованиям, в основном остаётся корректным. Добавлено девять новых критериев успеха, а критерий 4.1.1 «Парсинг» удалён как устаревший — современные браузеры и вспомогательные технологии сами справляются с ошибками разметки.

Для визуального дизайна важнее всего новые критерии про фокус (2.4.11, 2.4.12, 2.4.13) и размер целей (2.5.8). Для форм и сценариев — 3.3.7 «Избыточный ввод» и 3.3.8 «Доступная аутентификация». Также появились 2.5.7 «Перетаскивание», требующий альтернативы жестам drag-and-drop, и 3.2.6 «Последовательная помощь».

Большинство продуктов ориентируются на уровень AA. Критерии уровня AAA полезно знать как ориентир лучшей практики, даже если формально они не требуются.

Для дизайнера это означает конкретные изменения в макетах: продуманный индикатор фокуса для каждого интерактивного элемента, запас по размеру кликабельных зон, альтернативу перетаскиванию в виде кнопок и отказ от капчи-головоломок и требования запомнить пароль без возможности вставить его из менеджера паролей.

• 2.4.11 Фокус не перекрыт (минимум) — AA
• 2.4.13 Внешний вид фокуса — AAA
• 2.5.7 Перетаскивание — AA
• 2.5.8 Размер цели (минимум) — AA
• 3.3.7 Избыточный ввод — A
• 3.3.8 Доступная аутентификация (минимум) — AA

Контраст текста: 1.4.3 без сюрпризов

Критерий 1.4.3 требует коэффициента контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного. Крупным считается текст от 18 пунктов (примерно 24 CSS-пикселя) или от 14 пунктов полужирного начертания (примерно 18,66 пикселя). Коэффициент считается по относительной яркости цветов по формуле (L1 + 0,05) / (L2 + 0,05) и меняется от 1:1 до 21:1.

Типичные провалы — не основной текст, а второстепенный: серые подписи, плейсхолдеры, текст на кнопках с фирменным цветом, даты и метаданные в карточках. Плейсхолдер часто делают бледным намеренно, но если он несёт информацию, на него распространяются те же требования. Ещё лучше не полагаться на плейсхолдер вместо подписи поля вовсе.

Текст поверх изображений проверяйте по самой светлой и самой тёмной области под ним. Надёжные решения — подложка, градиентное затемнение или размещение текста вне фотографии. Если изображение меняется, например в слайдере или пользовательском контенте, контраст должен гарантироваться для любого кадра.

Исключения есть, но узкие: логотипы, декоративный текст и неактивные элементы интерфейса. Это не повод делать неактивную кнопку нечитаемой — пользователь всё равно должен понять, что на ней написано.

Нетекстовый контраст: границы, иконки, состояния

Критерий 1.4.11 требует контраста не ниже 3:1 для визуальной информации, необходимой, чтобы распознать элемент интерфейса и его состояние, а также для значимых частей графики. На практике это границы полей ввода, иконки без подписи, переключатели, чекбоксы, индикатор выбранной вкладки и линии на графиках.

Самая распространённая проблема — поля ввода со светло-серой рамкой на белом фоне. Если граница — единственное, что показывает пользователю, где поле, ей нужен контраст 3:1. Альтернатива — фон поля, заметно отличающийся от фона страницы, но и для него действует то же соотношение.

Состояния тоже должны различаться. Выбранный и невыбранный пункт сегментированного переключателя, включённый и выключенный тумблер — если разница только в оттенке, сравните их цвета между собой и с фоном. Не полагайтесь только на цвет: критерий 1.4.1 требует дополнительного признака — иконки, текста, формы или подчёркивания.

Графики — отдельная зона риска. Линии и сегменты, которые нужны для понимания данных, должны отличаться от фона и друг от друга. Если пятицветная палитра диаграммы не проходит по контрасту, добавьте подписи прямо на график, разные маркеры или штриховку — так информация не будет зависеть только от цвета.

Фокус: видимый и не перекрытый

Критерий 2.4.7 уровня AA требует, чтобы индикатор фокуса клавиатуры был виден. WCAG 2.2 добавила к нему 2.4.11: элемент в фокусе не должен быть полностью скрыт контентом, созданным автором страницы. На уровне AAA критерий 2.4.12 требует, чтобы не была скрыта никакая его часть.

Главные виновники перекрытия — липкие шапки и подвалы, cookie-баннеры, плавающие чаты и панели действий. Пользователь нажимает Tab, фокус уходит на ссылку под фиксированной шапкой, и он больше не видит, где находится. Простое решение для шапки — CSS-свойство scroll-padding-top на прокручиваемом контейнере со значением, равным её высоте. Баннеры лучше делать немодальными и не перекрывающими основной контент или давать их закрыть.

Критерий 2.4.13 «Внешний вид фокуса» относится к уровню AAA, но даёт полезный измеримый ориентир. Индикатор должен по площади быть не меньше контура толщиной 2 CSS-пикселя по периметру элемента и иметь контраст не ниже 3:1 между состояниями в фокусе и без него. Сплошной контур в 2 пикселя с небольшим отступом от элемента обычно закрывает это требование.

Используйте :focus-visible, чтобы показывать индикатор при навигации с клавиатуры, и никогда не удаляйте outline без замены. Проверить результат просто: пройдите страницу клавишей Tab и убедитесь, что на каждом шаге видно, где фокус.

• индикатор виден на каждом элементе
• липкие слои не перекрывают фокус
• контур около 2 px с контрастом 3:1
• порядок обхода совпадает с визуальным

Размер целей: 2.5.8 и закон Фиттса

Закон Фиттса описывает простую зависимость: время попадания в цель растёт с расстоянием до неё и уменьшается с ростом её размера. Маленькие и близко расположенные элементы приводят к промахам у всех пользователей, а для людей с тремором или ограниченной подвижностью делают интерфейс почти непригодным.

Новый критерий 2.5.8 уровня AA устанавливает минимум — 24×24 CSS-пикселя. Цель может быть меньше, если вокруг неё достаточно свободного пространства: при проверке вокруг центра каждой маленькой цели рисуют круг диаметром 24 пикселя, и такие круги не должны пересекаться с другими целями и с кругами соседних маленьких целей. Есть и другие исключения: ссылки внутри текста, стандартные элементы браузера, наличие эквивалентного элемента нужного размера и случаи, когда размер существенен.

Уровень AAA в критерии 2.5.5 требует 44×44 CSS-пикселя. Для мобильных интерфейсов разумно ориентироваться именно на него: близкие значения рекомендуют и платформенные гайдлайны. Визуально иконка может оставаться маленькой — увеличивается кликабельная область за счёт внутренних отступов или псевдоэлемента.

Частые нарушения: крестики закрытия модальных окон и тегов, иконки в строках таблиц, ссылки в подвале, стоящие вплотную, элементы пагинации. Их стоит проверять первыми.

Как встроить проверки в процесс

Доступность дешевле всего на уровне дизайн-системы. Заложите контрастные пары в токены и документируйте коэффициент для каждой пары текст–фон. Сделайте фокус частью каждого интерактивного компонента и задайте минимальную высоту кнопок и полей с учётом 24 и 44 пикселей.

Автоматические инструменты — расширения браузера, линтеры, проверки в CI — хорошо находят контраст, отсутствующие подписи и ошибки ARIA, но не определяют логичность порядка фокуса, перекрытие липкими слоями и понятность текста ошибок. Поэтому к каждому релизу добавляйте короткий ручной проход: клавиатура, увеличение до 200%, узкий экран 320 пикселей.

Самое эффективное — сделать проверки привычкой, а не отдельной задачей. Плагин контраста в Figma, чек-лист состояний в шаблоне задачи и обязательный проход с клавиатурой на ревью дают больше, чем ежегодный аудит.

Редакция Флагштока

Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.