Тестирование доступности: как проверить сайт для всех пользователей

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

О чём вообще речь

Доступность (accessibility, сокращённо a11y) — свойство продукта быть пригодным для людей с разными возможностями: с нарушениями зрения, слуха, моторики, внимания. Стандарт, на который ссылаются, называется WCAG.

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

Проверки, которые занимают минуты

1. Пройдите страницу только клавишей Tab. Не трогая мышь: можно ли добраться до всех элементов и в логичном ли порядке.
2. Посмотрите, видно ли фокус. Обводка вокруг активного элемента должна быть заметна. Убранная «ради красоты» обводка — типовой дефект.
3. Нажмите Enter и пробел на кнопках и ссылках: они должны срабатывать. Часто «кнопка», сделанная из div, не реагирует.
4. Увеличьте масштаб до 200%. Вёрстка не должна ломаться, текст — обрезаться.
5. Отключите картинки и посмотрите, остаётся ли смысл: есть ли альтернативный текст.
6. Проверьте контраст текста и фона — есть встроенный инструмент в DevTools.

Что проверять подробнее

Область	Что смотреть
Клавиатура	Все действия доступны, фокус виден, нет ловушек фокуса
Контраст	Не ниже 4.5:1 для обычного текста, 3:1 для крупного
Цвет	Не единственный носитель смысла: к красной рамке есть текст
Формы	Подписи связаны с полями, ошибки озвучиваются
Картинки	Осмысленный alt; у декоративных — пустой
Заголовки	Иерархия h1–h3 без пропусков, один h1 на странице
Видео и аудио	Субтитры или расшифровка
Анимация	Есть возможность отключить, нет мигания

Про ловушку фокуса

Отдельный дефект, который стоит знать по имени. Ловушка фокуса — ситуация, когда клавиатурный фокус попал внутрь элемента и не может выйти. Чаще всего случается в модальных окнах и виджетах.

Проверка простая: откройте модальное окно и понажимайте Tab. Фокус должен ходить по элементам окна и не уходить на страницу под ним, а Escape должен закрывать окно и возвращать фокус туда, откуда его открыли. Если фокус ушёл под окно или вообще исчез — дефект.

Инструменты

• Lighthouse в DevTools — быстрый автоматический отчёт с оценкой и списком проблем.
• axe DevTools — расширение, находит больше и объясняет подробнее.
• Пипетка контраста прямо в DevTools: при выборе цвета показывает соотношение и порог.
• Скринридер. На Windows встроен «Экранный диктор», на macOS — VoiceOver, на Android — TalkBack. Попробуйте пройти форму с закрытыми глазами.
• Эмуляция нарушений зрения в DevTools: моделирование дальтонизма и снижения контраста.

Как заводить такие дефекты

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

Вместо «нет alt у картинки» — «Каталог: у изображений товаров отсутствует альтернативный текст, пользователь скринридера не может определить, какой товар в карточке (WCAG 1.1.1)». Вместо «плохой контраст» — «Подвал: контраст ссылок 1.8:1 при минимуме 4.5:1, текст нечитаем на светлых экранах».

Ссылка на пункт стандарта превращает субъективное замечание в требование. Как оформлять остальное — в разборе как писать баг-репорт.

С чего начать на своём проекте

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

Этого достаточно, чтобы продукт стал заметно доступнее, а вы — получили аргументы для разговора о том, стоит ли идти дальше. Проверки форм в целом собраны в чек-листе тестирования формы.