Закрытие по Escape и восстановление фокуса

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

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

Нативный dialog, открытый с помощью showModal(), автоматически закрывается по Escape и создаёт событие отмены, которое при необходимости можно отслеживать.

Для пользовательской модальной области отслеживайте событие keydown и закрывайте её при нажатии Escape. Это всего несколько строк, но пропускать их нельзя.

Перед открытием модальной области сохраните элемент, на котором находился фокус. document.activeElement — это элемент, к которому вы позже вернёте пользователя.

Когда модальная область закрывается, верните фокус на сохранённый элемент. Этот шаг — восстановление фокуса — делает закрытие плавным.

Без восстановления фокус перемещается в начало страницы. Пользователь теряет своё место и должен снова пройти клавишей Tab весь путь. Это неприятно и совершенно необязательно. 😕

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

Многие модальные области также закрываются при щелчке по затемнённому фону. Это полезное дополнение, но оно ни в коем случае не должно заменять Escape или кнопку.

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

Откройте модальную область с клавиатуры, нажмите Escape и убедитесь, что фокус вернулся точно на исходный элемент, открывший её. Это и есть цель полного цикла. ✅

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