Кратко
СкопированоРоль окна dialog
используется для диалогового окна на странице.
В HTML эта роль есть у <dialog>
по умолчанию.
В вебе используют два типа диалоговых окон:
- модальные — блокируют работу со страницей;
- немодальные — допускают другие действия на сайте.
Пример
СкопированоМодальное диалоговое окно:
<div role="dialog" aria-labelledby="label" aria-describedby="description" aria-modal="true"> <h3 id="label">Заказ был отправлен!</h3> <p id="description"> Ваш заказ был отправлен и должен быть доставлен в течение следующих 3–5 рабочих дней. </p> <button>Закрыть</button></div>
<div role="dialog" aria-labelledby="label" aria-describedby="description" aria-modal="true" > <h3 id="label">Заказ был отправлен!</h3> <p id="description"> Ваш заказ был отправлен и должен быть доставлен в течение следующих 3–5 рабочих дней. </p> <button>Закрыть</button> </div>
Как пишется
СкопированоДобавьте к тегу role
, лучше всего к <div>
. Благодаря этой роли пользователи вспомогательных технологий поймут, что содержимое такого элемента отделено от остального содержимого страницы.
Чтобы диалоговое окно стало доступным, нужно ещё:
- добавить правильную подпись;
- поработать над фокусом с клавиатуры;
- добавить нужные стили для самого окна и элементов вокруг.
Добавить подпись для диалогового окна можно с помощью aria
, когда в окне есть видимый заголовок, или aria
, если видимого заголовка нет. Используйте для тега с подписью id
с таким же значением, как у aria
. Это свяжет диалоговое окно с заголовком.
У диалогового окна может быть и его расширенное описание. В этом случае используйте aria
.
Если использовать HTML-тег <dialog>
, то не придётся делать большинство из этих шагов.
Как понять
СкопированоДиалоговое окно dialog
используют, чтобы предложить пользователю ввести информацию, совершить дополнительное действие с интерфейсом или получить его согласие. Когда нужно прервать процесс или сессию, чтобы сообщить о чём-то важном, используйте другой тип диалогового окна alertdialog
.