Приходилось ли разрабатывать доступные компоненты
Что проверяют
Доступность для вас это пункт чек-листа перед релизом или способ писать разметку. Смотрят, знаете ли вы, что большая часть требований закрывается нативными элементами, и умеете ли проверять результат без мыши.
Как отвечать
Стройте ответ от простого к сложному.
- Семантика первым делом. Нативная кнопка, ссылка, поле с подписью через
labelбесплатно дают фокус, обработку клавиш, недоступное состояние и роль. Правило про вспомогательные атрибуты звучит так: лучший способ их применить это обойтись без них. - Клавиатура. Всё, что нажимается, работает с клавиатуры, порядок обхода совпадает с визуальным, признак фокуса остаётся видимым. У модального окна фокус переносится внутрь, не убегает наружу, возвращается на кнопку вызова, закрытие по
Esc, фон помечается неинтерактивным. - Состояния и сообщения. Ошибку связываем с полем через
aria-describedbyиaria-invalid, всплывающие уведомления отдаём в живую областьaria-live, иначе экранный диктор про них не узнает. - Оформление. Достаточный контраст, смысл передаётся не только цветом, вёрстка переживает увеличение масштаба, анимация уважает системную настройку.
Про проверку скажите, что сначала проходите сценарий одной клавиатурой, потом слушаете диктором, и только затем смотрите автоматический аудит.
Где спотыкаются
Вешают роль и подпись на div вместо кнопки. Такой элемент не попадает в обход по клавишам без tabindex, не реагирует на пробел, не умеет недоступное состояние, а подпись на элементе без роли диктор может и не прочитать.
Убирают обводку фокуса ради дизайна и не дают замены. Для человека без мыши это потеря курсора: непонятно, где он сейчас и что случится по нажатию. Правильный ход это своя заметная обводка, при нужде только для клавиатурного фокуса.
Верят зелёному отчёту анализатора. Инструменты ловят лишь часть критериев: контраст, отсутствующие подписи, дубли идентификаторов. Окно, из которого нельзя выйти, форма с ошибкой, о которой не сообщили, карусель без управления с клавиатуры проходят такой аудит без замечаний.