Роли диалоговых окон и встроенный элемент dialog

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

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

Элемент HTML dialog создан именно для этой задачи. Он автоматически получает семантику диалога, поэтому программы чтения с экрана объявляют его правильно.

Вызовите showModal() в JavaScript, чтобы открыть диалог как настоящую модальную область. Благодаря этому страница позади становится неактивной и недоступной.

Будьте внимательны: show() открывает диалог как немодальный, поэтому страница позади остаётся интерактивной. Для блокирующего диалога используйте showModal().

Внутри системы этот элемент соответствует роли dialog. Если необходимо создать диалог на основе div, атрибут role="dialog" придаст ему нужный смысл.

Если диалог требует ответа, например подтверждения удаления, используйте role="alertdialog". Это сообщает вспомогательным технологиям о повышенной срочности.

У диалога должно быть доступное имя, чтобы при открытии пользователи понимали его назначение. Укажите в aria-labelledby заголовок внутри диалога.

Нативный элемент предоставляет соответствующий метод close(). Его вызов закрывает диалог и снова делает страницу позади доступной.

Модальный диалог автоматически получает фон, который можно стилизовать с помощью псевдоэлемента ::backdrop. Он затемняет страницу и показывает, что фокус переместился.

Нативный dialog самостоятельно обрабатывает фокус, Escape и блокировку фона. Используя его, вы допускаете меньше ошибок, чем при создании собственного div.

Вы узнали, что модальной области нужна семантика диалога. Предпочитайте нативный dialog с showModal(), задавайте ему имя, а alertdialog оставляйте для срочных решений.