⠀
В GitHub появился хороший маленький кейс по Yeliztli: в приложении есть семь выезжающих панелей с деталями генетических вариантов. Визуально они ведут себя как модальные окна: открываются поверх страницы, есть затемнение и закрытие по Escape.
⠀
Но в issue #703 автор показывает неприятную разницу: четыре панели вообще не объявлены как
role="dialog" и aria-modal="true", а ни одна из семи не управляет фокусом.⠀
Что это значит на практике: пользователь с клавиатурой или экранным доступом открывает панель, а фокус не переходит внутрь. Дальше Tab может увести его в затемнённую страницу под панелью. Для зрячего человека это выглядит как один активный слой, а для пользователя ассистивных технологий получается два смешанных слоя: панель открыта, но навигация уже гуляет по фону.
⠀
Это особенно неприятно в интерфейсах с важными данными. Если панель показывает детали варианта, лекарства, риска или другого сложного объекта, пользователь должен понимать: где он сейчас, что открылось, как пройти по содержимому и как безопасно вернуться назад.
⠀
Я бы проверял такие компоненты не по признаку «оно красиво открылось», а по полному сценарию:
⠀
- экранный доступ объявляет диалог;
- фокус при открытии попадает внутрь панели;
- Tab не уходит в фон;
- Escape и кнопка закрытия работают предсказуемо;
- после закрытия фокус возвращается на элемент, который открыл панель.
⠀
Если этого нет, модальное окно существует только для глаз. Для части пользователей это не слой интерфейса, а ловушка или, наоборот, дырка, через которую фокус проваливается в старую страницу.
⠀
Источник: bioedca/Yeliztli#703