Доступность WCAG 2.2 — быстрый чек-лист

Что важно знать до старта работ

Доступность сайта WCAG — это не про «официальную галочку», а про снижение отказов, сокращение времени на поиск информации и расширение аудитории за счет людей с различными сценариями использования. Мы рассматриваем доступность как инженерную дисциплину, а не как разовую косметическую правку перед релизом.

• Согласуем цели: какие ограничения есть у ваших пользователей и какой охват нам критичен.
• Фиксируем уровень соответствия: AA для продуктовых интерфейсов — реалистичный минимум.
• Встраиваем проверки в процесс: компонентная библиотека, визуальные регрессионные тесты, линтеры и ручной проход по критическим сценариям.

Короткий чек‑лист WCAG 2.2 (практика)

Фокус и управление

• Фокус всегда виден. Aria правила интерфейс не подменяют нативный outline: используем :focus-visible, не скрываем кольцо фокуса, обеспечиваем достаточную толщину и контраст.
• Фокус не перекрывается: хедеры, фиксаторы, всплывающие слои не должны закрывать активный элемент. Проверяем скролл к элементу и пересчет якорей.
• Движения перетаскиванием не обязательны: любая операция drag‑and‑drop должна иметь клавиатурный эквивалент («переместить вверх/вниз»).
• Размер цели: интерактивы не меньше рекомендованных значений, отступы вокруг кликабельной области не конфликтуют с соседями.

Воспринимаемость

• Контраст текста и компонент не ниже AA. Для темной темы — проверяем локальные тона на «грязно‑серые» и хроматические черные.
• Alt текст изображения обязателен, если картинка несет смысл. Декор помечаем как alt=«» и роль presentation.
• Медиа без автозапуска звука; у видео — постер, субтитры и управление с клавиатуры.

Понятность

• Предсказуемые паттерны: однотипные элементы ведут себя одинаково, метки устойчивые по всему проекту.
• Ошибки форм — текстовые, не только цвет; есть явные инструкции как исправить.
• Аутентификация без когнитивных тестов: не заставляем распознавать картинки; есть варианты входа по коду или менеджеру паролей.

Надежность

• Семантика и роли: используем HTML‑структуру, ARIA лишь дополняет, а не заменяет.
• Доступность сохраняется при масштабировании до 400% и при отключенных стилях.
• Состояния элементов читаются скринридером: aria-expanded, aria-current, aria-live применены корректно.

Компоненты: дизайн и фронтенд

Кнопки

• Роли и состояния: <button>, а не <div> с онкликом; корректные type, disabled, и полноценный фокус.
• Иконки с текстом: если иконка единственная, используем aria-label с конкретным действием.

Ссылки и навигация

• Контекстно понятные тексты ссылок: вместо «Подробнее» указываем сущность действия.
• Скип‑линки: переход к основному контенту и к навигации с клавиатуры.

Формы

• Метки связаны с контролами через <label for> или вложенность.
• Плейсхолдер — не метка. Он вспомогателен и может исчезать.
• Подсказки и ошибки связаны через aria-describedby; роли объявляют состояние, а не только цветом.

Процесс: как мы превращаем чек‑лист в ежедневную практику

1. Диагностика: быстрый аудит интерфейса и кода, замеры контраста, обход критических сценариев скринридером.
2. Политика дизайна: токены контраста, размеры цели, правила фокуса и масштабирования прописаны в дизайн‑системе.
3. Компонентная библиотека: каждый шаблон проходит ручной и автоматизированный прогон.
4. Регулярные регрессы: визуальные и DOM‑регрессии плюс сценарные проверки.

В результате доступность сайта wcag становится свойством всей системы: от бренд‑палитры и типографики до React‑компонентов и пайплайна публикации. Вопросы по срокам и стоимости — через контакты, поможем собрать план внедрения под ваш стек.