Как проводить accessibility тестирование и что проверять?
Что проверяют
Знаете ли вы стандарт, умеете ли сочетать автоматические проверки с ручными и понимаете, какую долю проблем ловят инструменты. Следом часто просят показать на живой странице, как вы проверите модальное окно или форму.
Как отвечать
Опорный стандарт WCAG, актуальная версия 2.2, целевой уровень обычно AA. Принципы: воспринимаемость, управляемость, понятность, надёжность. В России действует ГОСТ Р 52872-2019, он основан на WCAG 2.1.
Порядок работы:
- автоматика: axe-core (расширение axe DevTools или
@axe-core/playwrightв автотестах), Lighthouse, WAVE, pa11y в CI. Ловят отсутствующийalt, контраст, пустые ссылки, поля без подписей, но это меньшая часть проблем; - клавиатура: пройти страницу только Tab и Shift+Tab. Порядок фокуса логичный, фокус видно, ловушек нет, Esc закрывает модалку, а фокус после закрытия возвращается на кнопку, которая её открыла;
- скринридеры: NVDA с Chrome или Firefox на Windows, VoiceOver с Safari на macOS и iOS, TalkBack на Android. Элементы должны озвучиваться с ролью и состоянием, а ошибки формы и уведомления объявляться через
aria-live; - контраст: 4.5:1 для обычного текста, 3:1 для крупного текста и элементов интерфейса;
- масштаб: увеличение до 200% без потери контента, на ширине 320 CSS-пикселей нет горизонтальной прокрутки;
- структура: иерархия заголовков, ориентиры
mainиnav, поля форм подписаны черезlabel.
Найденное оформляйте с номером критерия WCAG, так разработчику сразу понятно, что нарушено.
Где спотыкаются
Считают, что 100 баллов в Lighthouse означают доступный сайт. Автоматика не понимает смысла: alt="image" проходит проверку, но пользователю скринридера ничего не говорит.
Предлагают навесить ARIA везде. Первое правило ARIA: если есть нативный элемент, используйте его. div с role="button" без обработки Enter и Space хуже обычной кнопки.
Проверяют статичную страницу и пропускают динамику: модальные окна, выпадающие списки, смену маршрута в SPA, уведомления, которые исчезают раньше, чем их успевают прочитать.