WCAG — международные рекомендации по доступности веб-контента. Стандарт описывает результат: человек должен получить информацию и выполнить действие независимо от зрения, слуха, моторики или способа управления устройством. Он не диктует цвет кнопок и не сводится к атрибутам alt.
Из чего состоит WCAG 2.2
Документ W3C организован в четыре слоя: принципы, рекомендации, критерии успеха и поясняющие техники. Четыре принципа обозначают словом POUR: perceivable, operable, understandable, robust — воспринимаемость, управляемость, понятность и надёжность. Критерии успеха сформулированы так, чтобы результат можно было проверить, а техники показывают возможные способы реализации.
Например, принцип управляемости требует, чтобы функции были доступны с клавиатуры. Разработчик может выполнить это нативной кнопкой, корректной ссылкой или сложным компонентом с обработкой клавиш и фокуса. Стандарт оценивает итоговое поведение, поэтому одна и та же техника не подходит всем интерфейсам.
- Воспринимаемость: альтернативы изображениям, субтитры, контраст, масштабирование.
- Управляемость: клавиатура, видимый фокус, достаточно времени, отсутствие опасных вспышек.
- Понятность: предсказуемая навигация, подписи полей, ясные сообщения об ошибках.
- Надёжность: корректная семантика и совместимость со вспомогательными технологиями.
Уровни A, AA и AAA
Уровень A закрывает базовые барьеры: клавиатурный доступ, текстовые альтернативы, понятное назначение полей. AA добавляет требования к контрасту, фокусу, масштабу, размеру цели и другим повседневным сценариям. AAA включает наиболее строгие критерии. W3C не советует требовать полное соответствие AAA для сайта целиком, поскольку некоторый контент физически не может выполнить все критерии этого уровня.
Заявление о соответствии AA означает выполнение всех применимых критериев A и AA на указанной области сайта. Прогнать главную страницу через сканер недостаточно. В область проверки включают шаблоны, состояния ошибок, модальные окна, формы, личный кабинет и документы, которые участвуют в выбранных сценариях.
| Уровень | Что означает | Как применять |
|---|---|---|
| A | Минимальная доступность | Обязательная база для компонентов |
| AA | Основные барьеры в реальном использовании | Обычная цель сайта и продукта |
| AAA | Дополнительные строгие критерии | Точечно для критичного контента |
Как внедрить WCAG в дизайн и разработку
Начинать с готового сайта дорого: одна ошибка в компоненте повторяется на сотнях экранов. Добавьте доступность в дизайн-систему. Для кнопки храните состояния покоя, наведения, фокуса, загрузки и недоступности; для поля — подпись, подсказку, ошибку и связь через программное имя. Контраст проверяйте для каждой пары цветов до передачи макета в разработку.
В коде сначала используйте HTML по назначению: button для действия, a для перехода, label для поля, заголовки для структуры. ARIA дополняет семантику сложных виджетов, но не исправляет неверный элемент автоматически. Интерактивный div потребует вручную воспроизвести поведение клавиатуры и доступное имя.
- Выбрать целевой уровень и перечислить пользовательские сценарии.
- Проверить токены цвета, типографику и состояния фокуса в дизайн-системе.
- Собрать компоненты на нативном HTML и описать клавиатурное поведение сложных виджетов.
- Добавить автоматические проверки в тесты и сборку.
- Принимать сценарий вручную до выпуска и после крупных изменений.
Быстрая ручная проверка сайта
Выберите путь, который приносит результат: поиск товара, заказ, регистрация, отправка заявки. Пройдите его без мыши клавишами Tab, Shift+Tab, Enter, Space и стрелками. Фокус должен быть заметен, двигаться в логичном порядке и возвращаться в ожидаемое место после закрытия диалога. Затем увеличьте страницу до 200% и проверьте, не перекрылись ли текст и элементы управления.
Включите VoiceOver, NVDA или Narrator и просмотрите страницу по заголовкам, ссылкам и полям формы. Слушайте доступные имена: «кнопка» без назначения бесполезна, как и пять ссылок «подробнее». У изображений оценивают смысл описания, а не наличие alt: декоративному изображению нужен пустой alt, информативному — краткая замена передаваемой информации.
- Весь сценарий завершается с клавиатуры.
- Фокус виден и не попадает под закреплённые панели.
- Поля имеют постоянные подписи, а ошибки объясняют исправление.
- Заголовки образуют понятный план страницы.
- При 200% не теряется содержимое и функция.
Автоматические инструменты и их пределы
axe, Lighthouse и WAVE находят часть машинно определяемых нарушений: отсутствующие имена, некоторые ошибки контраста, дубли идентификаторов и неверные роли. Они ускоряют регрессионную проверку, но не решают, понятен ли текст ссылки, соответствует ли порядок фокуса задаче и описывает ли альтернативный текст изображение. Нулевой список автоматических ошибок не подтверждает соответствие WCAG.
Для контроля используйте три слоя: компонентные тесты, сканирование готовых шаблонов и ручной проход. На сложном продукте добавьте тестирование с людьми, которые постоянно пользуются экранными дикторами, увеличением или альтернативными устройствами ввода. Результаты фиксируйте с URL, состоянием, критерием WCAG, способом воспроизведения и ожидаемым поведением.
Как поддерживать доступность после релиза
Закрепите критерии в definition of done и проверяйте общие компоненты при каждом изменении. Автоматический скан можно запускать в CI на тестовых страницах, а критические сценарии — по расписанию и перед крупным выпуском. Отдельно контролируйте контент: редактор способен сломать иерархию заголовков, добавить ссылку без смысла или опубликовать изображение с текстом без расшифровки.
Краулер помогает находить повторяющиеся технические дефекты по всему сайту. Краулинг-аудит Index-Now.ru полезен для структуры, статусов и метаданных, но его отчёт не заменяет проверку доступности. Для скорости и полевых метрик используйте отдельный аудит PageSpeed и Lighthouse.
Частые вопросы
Какую версию WCAG использовать?
Для нового проекта берите WCAG 2.2. Он сохраняет критерии 2.1, кроме исключённого критерия 4.1.1, и добавляет требования к фокусу, перетаскиванию, размеру целей и аутентификации.
Можно ли подтвердить WCAG одним отчётом Lighthouse?
Нет. Автоматический тест охватывает только часть критериев. Нужны ручные проверки поведения, смысла текста и работы со вспомогательными технологиями.
Связан ли WCAG напрямую с позициями в поиске?
Поисковые системы не обещают рост за сертификат WCAG. Семантический HTML и понятная структура полезны и пользователям, и роботам, но доступность следует оценивать как качество продукта.