Как проверить доступность сайта: чек-лист WCAG 2.2 для начинающих

Если важная кнопка не работает без мыши, подпись поля видна только до ввода, а текст теряется на фоне, сайтом сложнее пользоваться. Такие проблемы встречаются не только у людей с инвалидностью. Они мешают посетителям с временной травмой, уставшими глазами, маленьким экраном или неудобным тачпадом.

Начать проверку можно самостоятельно. Ниже простой чек-лист по основным принципам WCAG 2.2. Он поможет найти очевидные барьеры, но не заменит полноценный аудит и тестирование с пользователями.

Что такое WCAG 2.2

WCAG - рекомендации Консорциума Всемирной паутины W3C по доступности веб-контента. Версия 2.2 расширяет предыдущую редакцию и включает дополнительные критерии, в том числе требования к видимости фокуса и размеру целей нажатия.

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

Для практической оценки обычно смотрят на уровень AA. Но конкретные обязательства зависят от страны, отрасли и типа проекта. Этот материал не является юридической консультацией и не подтверждает соответствие сайта стандарту.

1. Пройдите сайт клавиатурой

Уберите руку с мыши и последовательно нажимайте Tab. Фокус должен переходить по интерактивным элементам в понятном порядке: от шапки к содержимому, затем к формам и подвалу. Shift + Tab переводит фокус назад, Enter активирует ссылку или кнопку, пробел часто работает с кнопками и переключателями.

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

2. Проверьте видимость фокуса

Когда вы переходите клавишей Tab, вокруг активного элемента должен быть заметный индикатор. Не отключайте стандартную обводку без равноценной замены. Проверьте её на светлых и тёмных участках страницы, а также убедитесь, что липкая шапка или баннер не закрывает элемент целиком.

WCAG 2.2 включает критерии о том, чтобы фокус не был полностью скрыт авторским содержимым. Для нового критерия Focus Appearance уровня AA есть отдельные требования к площади и контрастности индикатора. Не сводите проверку только к тому, что «рамка вроде есть»: сверяйте критерий с документацией W3C и оценивайте фактический интерфейс.

3. Оцените контраст и масштабирование

Критерий WCAG 2.2 AA для обычного текста задаёт контрастность не менее 4,5:1. Для крупного текста порог составляет 3:1. У элементов управления и графики есть отдельные требования. Сам цвет не должен быть единственным способом показать ошибку, выбранное состояние или важное различие.

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

4. Проверьте формы и сообщения об ошибках

У каждого поля должна быть понятная подпись, которая остаётся доступной и после ввода. Одного текста-заполнителя внутри пустого поля недостаточно для ясного понимания, что нужно ввести. Инструкция должна объяснять формат, если он не очевиден.

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

5. Проверьте изображения, заголовки и ссылки

Содержательным изображениям нужен альтернативный текст, который передаёт важную для контекста информацию. Декоративное изображение можно скрыть от вспомогательных технологий. Не переписывайте в alt весь окружающий абзац и не начинайте каждый текст со слов «изображение» без необходимости.

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

6. Не считайте автоматический сканер полным аудитом

Автоматические средства помогают обнаружить часть ошибок: пустые подписи, некоторые проблемы контраста и некорректную структуру. Но они не всегда понимают, описывает ли alt смысл изображения, логичен ли порядок клавиатурной навигации и сможет ли человек завершить задачу.

Используйте автоматические отчёты как список подсказок, а не сертификат соответствия. Ключевые сценарии нужно пройти вручную. Для важных сервисов полезно привлечь специалистов по доступности и пользователей, которые пользуются вспомогательными технологиями.

Короткий чек-лист

• Пройти главные сценарии клавиатурой.
• Убедиться, что фокус заметен и не закрыт элементами страницы.
• Проверить контраст текста и компонентов.
• Увеличить масштаб и проверить поведение на узком экране.
• Проверить подписи полей и понятность ошибок.
• Оценить альтернативный текст, заголовки и назначение ссылок.
• Сопоставить ручную проверку с результатами автоматического сканера.

Мнение редакции

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

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

Источники: W3C WCAG 2.2 Quick Reference; W3C: новые критерии WCAG 2.2; W3C WAI: советы по проектированию доступных сайтов; W3C WAI: принципы доступности.