Если фокус клавиатуры пропадает внутри модального окна, пользователь не может нормально пройти форму, закрыть окно или вернуться к странице без мыши.

Это проблема UX и доступности, особенно для сервисов, где важны формы, заявки, личный кабинет и оплата.

Коротко: модальное окно должно удерживать фокус внутри и возвращать его на исходный элемент после закрытия.

Почему это происходит

Фокус ломается из-за отсутствия focus trap, неправильного tabindex, перерендера компонента, скрытых элементов в DOM, конфликта нескольких модалок, неверного aria-modal или удаления кнопки, на которую нужно вернуть фокус.

Что проверить сначала

  • куда попадает фокус при открытии
  • работает ли Tab и Shift+Tab
  • закрывается ли окно по Escape
  • есть ли aria-modal и role dialog
  • возвращается ли фокус после закрытия

Как я решаю такую задачу

Я проверяю модальное окно клавиатурой и скринридерной логикой, а не только визуально.

  • прохожу сценарий без мыши
  • нахожу место потери фокуса
  • настраиваю focus trap
  • исправляю aria и tabindex
  • проверяю возврат фокуса и мобильное поведение

Что подготовить

  • страницу с модальным окном
  • какой сценарий ломается
  • используемый frontend-фреймворк
  • доступ к коду
  • требования по доступности при наличии

Каким должен быть результат

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

Чего лучше не делать

Не ставьте tabindex на все элементы подряд. Это часто ухудшает порядок навигации.

FAQ

Что такое focus trap?

Механизм, который не дает фокусу уйти за пределы открытого модального окна.

Нужен ли aria-modal?

Да, для корректного объявления диалога вспомогательными технологиями.

Почему мышью все нормально?

Проблема видна именно при клавиатурной навигации и скринридерах.

Можно ли проверить автоматически?

Частично, но ручной проход клавиатурой обязателен.

Нужна похожая задача?

Напишите в Telegram @rabotator_support или оставьте заявку на сайте. Коротко опишите проблему, приложите ссылку или пример ошибки, и я скажу, как безопасно подойти к исправлению.

Итог

Доступное модальное окно - это не только красивый слой поверх страницы, а полноценный управляемый компонент с правильным фокусом.