Что такое WCAG
WCAG - рекомендации W3C по доступности веб-контента. Они описывают требования к восприятию, управлению, понятности и технической устойчивости интерфейсов. Актуальная версия WCAG 2.2 добавила новые критерии, связанные, в частности, с фокусом и целевыми областями. Обзор изменений опубликован W3C: What's New in WCAG 2.2.
Для бизнеса полезно начинать не с заявления соответствует WCAG, а с конкретных проверок, которые реально улучшают сайт.
Практическая проверка по WCAG 2.2
1. Пройдите сайт только клавиатурой
Нажимайте Tab и Shift+Tab. Должно быть понятно, какой элемент сейчас активен. До кнопок, ссылок, меню и полей формы нужно добираться без мыши.
Если фокус исчезает визуально или застревает внутри модального окна, это проблема. W3C включает клавиатуру и видимый фокус в свои Easy Checks.
2. Проверьте контраст
Светло-серый текст на бежевом фоне может выглядеть премиально на дизайнерском мониторе и быть плохо читаемым в обычных условиях. Контраст нужно измерять, а не оценивать на глаз.
Особенно проверяйте мелкий текст, плейсхолдеры, ссылки, disabled-состояния и текст поверх фотографий.
3. Увеличьте страницу
При увеличении текст не должен становиться недоступным, перекрываться fixed-панелями или требовать горизонтального скролла для обычного чтения. Хороший адаптив помогает здесь автоматически, но нестандартные размеры в пикселях могут ломать масштабирование.
4. Alt у содержательных изображений
Alt должен передавать смысл изображения в контексте. Декоративной графике не нужен длинный SEO-описатель. Фотография продукта, схема или график требуют более осмысленной альтернативы.
Не используйте alt как поле для набора ключевых слов.
5. Структура заголовков
H1-H3 должны описывать иерархию текста, а не выбираться по визуальному размеру. Это полезно и для ассистивных технологий, и для нормальной редакционной структуры.
6. Формы
- у поля есть понятная подпись;
- ошибка объясняет, что исправить;
- цвет не является единственным сигналом ошибки;
- чекбокс можно активировать с клавиатуры;
- фокус после ошибки остается управляемым;
- плейсхолдер не заменяет label там, где подпись нужна постоянно.
7. Анимация
Сложные parallax, автодвижение и резкие переходы могут мешать части пользователей. Учитывайте системное предпочтение prefers-reduced-motion там, где анимация существенная, и не делайте ее единственным способом понять состояние.
8. Размеры интерактивных элементов
Маленький крестик, ссылка вплотную к другой ссылке и тонкая стрелка карусели создают проблемы не только для accessibility, но и для обычного мобильного использования. WCAG 2.2 содержит отдельный критерий Target Size (Minimum).
Числовые ориентиры WCAG 2.2, которые полезно знать
У доступности есть измеримые критерии. Для уровня AA обычный текст должен иметь контраст не ниже 4.5:1, а крупный текст - не ниже 3:1. Для визуально значимых элементов интерфейса используется порог 3:1. Подробности приведены в материалах W3C по контрасту текста и контрасту интерфейса. Текст должен увеличиваться до 200% без потери контента или функциональности - это отдельный критерий Resize Text.
В WCAG 2.2 появился критерий Target Size (Minimum) уровня AA: целевая область для pointer input должна быть не меньше 24×24 CSS px либо удовлетворять условиям по расстоянию и исключениям. Подробности есть в разборе W3C. Для более строгого уровня AAA критерий Enhanced использует 44×44 CSS px.
| Проверка | Ориентир |
|---|---|
| Контраст обычного текста | 4.5:1 для AA |
| Контраст крупного текста | 3:1 для AA |
| Контраст значимых UI-элементов | 3:1 |
| Resize Text | До 200% без потери содержания и функций |
| Target Size Minimum | 24×24 CSS px с предусмотренными исключениями |
| Reflow | Контент должен работать при ширине, эквивалентной 320 CSS px, кроме обоснованных исключений |
Эти значения не заменяют сам стандарт. Например, маленькая ссылка внутри обычного предложения может попадать под исключение Target Size, а декоративный текст имеет другие условия контраста. Поэтому цифры нужны как рабочие ориентиры, а не как автоматический сертификат соответствия.
Не путайте видимый фокус и критерий Focus Appearance
Для практического AA-аудита критично, чтобы клавиатурный фокус был видим и пользователь понимал свое положение. В WCAG 2.2 отдельный критерий Focus Appearance относится к уровню AAA, поэтому не стоит выдавать его числовые требования за обязательный AA-порог. Но как дизайн-практика заметный контрастный outline полезен и для обычных бизнес-сайтов.
Что могут автоматические инструменты
Они быстро находят часть проблем: отсутствующие alt, некоторые ошибки ARIA, контраст, структуру. Но автоматический тест не знает, описывает ли alt смысл изображения, логичен ли порядок фокуса и понятен ли текст ошибки.
W3C прямо рекомендует сочетать инструменты с человеческой оценкой. См. Selecting Web Accessibility Evaluation Tools.
Что проверить на Tilda
Tilda публикует отдельные рекомендации по доступности платформы и базовым настройкам. См. справку Tilda по accessibility. Но кастомный Zero Block, собственный JavaScript и нестандартные формы все равно требуют отдельного тестирования.
WCAG и юридические требования - не одно утверждение для всех стран
Обязанности зависят от юрисдикции, отрасли и типа организации. Не стоит писать в футере соответствуем WCAG 2.2 AA только после запуска автоматического сканера. Если соответствие является договорным или правовым требованием, нужен полноценный аудит по применимому стандарту.
Когда подключать screen reader
Базовый проход клавиатурой находит много проблем, но для важных сервисов полезно проверить хотя бы основные страницы экранным диктором. Так обнаруживаются бессмысленные названия ссылок, дублирующиеся подписи, неверный порядок чтения и интерактивы, которые визуально выглядят нормально.
Если доступность является формальным требованием проекта, нужен более полный тест с участием специалистов и пользователей, а не только чек-лист разработчика.
Встройте доступность в процесс
Дешевле проверить контраст в дизайн-системе один раз, чем исправлять его на ста страницах. То же относится к компонентам формы, фокусу и размерам кнопок. Чем раньше правило становится частью компонента, тем меньше ручных ошибок при масштабировании.
Понятный текст - тоже часть доступности
Сложная терминология, неоднозначные подписи кнопок и сообщение ошибка 42 мешают пользователю независимо от технологии. Формулировка должна объяснять действие: например, Введите телефон в формате +7... вместо Красное поле заполнено неверно.
Accessibility начинается не только в коде. Редактура, дизайн и разработка делят ответственность.
Минимальный первый проход
Пройдите сайт клавиатурой, проверьте фокус и контраст, увеличьте масштаб, протестируйте формы, alt и заголовки, отключите мышь и попробуйте выполнить главные сценарии. Уже этот набор находит большое число реальных проблем.
Для общего исследования интерфейса accessibility стоит включить в UX-аудит, а не держать отдельным чек-листом, к которому возвращаются раз в несколько лет.
