Поиск клавиатурных ловушек

Клавиатурная ловушка — это любое место, куда фокус может попасть, но из которого нельзя выйти с помощью клавиатуры. Для пользователя без мыши это тупик. 🪤

Пользователю в ловушке может потребоваться перезагрузить всю страницу, чтобы выбраться. WCAG считает ловушку без выхода нарушением, а не мелкой ошибкой.

Ловушки часто встречаются в сложных виджетах: пользовательских календарях, встроенных редакторах и сторонних плагинах, которые захватывают фокус и не возвращают его.

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

Встроенное содержимое, например видео или карта, находится в iframe. Некоторые такие элементы захватывают фокус и оставляют пользователя внутри без выхода.

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

Некоторые ловушки позволяют Tab перемещаться вперёд, но блокируют Shift+Tab. Проверяйте оба направления, поскольку односторонний маршрут всё равно остаётся ловушкой.

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

Проверка проста и эффективна. Пройдите с помощью Tab всю страницу, используя только клавиатуру, и ни разу не обращайтесь к мыши, чтобы выбраться.

Если фокус продолжает перемещаться по кругу внутри одного компонента, а Tab не переводит его дальше, Вы нашли ловушку. Точно запишите, где она Вас остановила.

Исправление заключается в восстановлении выхода: позвольте Tab продолжить движение, обрабатывайте Escape, а при закрытии возвращайте фокус к элементу, открывшему этот слой.

Определите, что именно характеризует клавиатурную ловушку.

Ловушка удерживает фокус и не оставляет выхода с клавиатуры, что нарушает требования WCAG. Проходите всё с помощью Tab в обоих направлениях и всегда предоставляйте путь выхода. ✅