Аудит доступности сайта: с чего начать

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

01Зачем вообще проверять доступность

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

Во-вторых, поисковые системы используют примерно те же сигналы, что и assistive-технологии: правильные заголовки, разметка, alt-атрибуты, осмысленные ссылки. Подробнее об этом — в материале «Доступность как фактор SEO».

В-третьих, это снижает риски: ряд госконтрактов, образовательных и медицинских ниш в РФ требует соответствия по доступности. И, наконец, это просто хорошо для репутации бренда.

02Что должно быть до начала аудита

Прежде чем запускать сканеры, зафиксируйте на бумаге несколько вещей. Иначе результаты будут абстрактными «исправьте всё».

• Список ключевых страниц. Главная, страница услуги или категории, карточка товара или услуги, форма заявки, страница спасибо. На этих страницах решается 90% задач пользователя.
• Целевой уровень WCAG. Для большинства сайтов малого бизнеса достаточно WCAG 2.1 AA. Подробнее — в нашем материале «WCAG для малого бизнеса простыми словами».
• Список устройств и браузеров. Десктоп Chrome, Android Chrome, iOS Safari — минимум. На мобильных проблем обычно больше.
• Целевые сценарии. «Найти услугу → оставить заявку», «выбрать товар → положить в корзину → оформить заказ». По ним и пойдёт проверка.

03Автоматические инструменты: что они видят

Сразу честно: автоматика находит, по разным оценкам, треть проблем доступности. Остальное приходится проверять руками. Но три-четыре сканера за пять минут дают отличную «карту низковисящих фруктов».

Lighthouse

Встроен в Chrome (вкладка DevTools → Lighthouse). Категория Accessibility даёт балл 0–100 и список проверенных правил. Хорош для общего среза и для быстрой проверки после правок.

axe DevTools

Бесплатное расширение Chrome/Firefox от Deque. Главное преимущество — у каждой найденной проблемы есть ссылка на критерий WCAG и понятное объяснение, как чинить. Это первый инструмент, который стоит ставить.

WAVE

Расширение от WebAIM. Накладывает иконки прямо на страницу: вот тут красный — ошибка, тут жёлтый — предупреждение. Удобно для дизайнеров и контент-менеджеров, потому что результаты видны на сайте, а не в отдельной панели.

Проверка контраста

Расширения вроде Stark или встроенный инструмент в Chrome DevTools (Inspector → Computed → цвет). Минимум по WCAG AA — 4.5:1 для обычного текста и 3:1 для крупного. Контраст — самая частая и самая простая для исправления ошибка.

04Ручная проверка: чек-лист на 30 минут

Автоматика прошла — теперь руки. Этот блок важнее автоматики, потому что именно тут ловятся проблемы, ломающие реальные сценарии.

• Проход по сайту только клавишей Tab. Виден ли фокус в любом состоянии? Можно ли добраться до всех ссылок и кнопок? Не «улетает» ли фокус в скрытое меню?
• Проверка форм. У каждого поля есть видимая подпись (label)? Что говорит сайт при ошибке: озвучивается текст, цвет не единственный сигнал? Подробнее об этом — в материале о доступности форм.
• Проверка модалок и попапов. При открытии фокус уходит внутрь окна? Esc закрывает? Tab не «убегает» на страницу за модалкой?
• Зум 200%. Не ломается ли вёрстка, не уезжают ли элементы за экран, не появляется ли горизонтальный скролл по основному контенту?
• Прогон со screen-reader. NVDA на Windows или VoiceOver на Mac/iOS — об этом отдельный материал «Тестирование сайта screen-reader’ом».
• Видео и анимации. Есть ли возможность остановить автозапуск? Не мигает ли что-то чаще трёх раз в секунду?

05Что делать с найденным списком

Самая частая ошибка после аудита — попытка исправить всё сразу. В итоге не делается ничего. Куда продуктивнее разложить находки на три кучки.

Критично — чинить сейчас

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

Важно — в ближайший спринт

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

Косметика — по мере правок

Декоративные иконки без aria-hidden, лишние пустые `