dialog

Роль окна 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="dialog", лучше всего к <div>. Благодаря этой роли пользователи вспомогательных технологий поймут, что содержимое такого элемента отделено от остального содержимого страницы.

Чтобы диалоговое окно стало доступным, нужно ещё:

• добавить правильную подпись;
• поработать над фокусом с клавиатуры;
• добавить нужные стили для самого окна и элементов вокруг.

Добавить подпись для диалогового окна можно с помощью aria-labelledby, когда в окне есть видимый заголовок, или aria-label, если видимого заголовка нет. Используйте для тега с подписью id с таким же значением, как у aria-labelledby. Это свяжет диалоговое окно с заголовком.

У диалогового окна может быть и его расширенное описание. В этом случае используйте aria-describedby.

Если использовать HTML-тег <dialog>, то не придётся делать большинство из этих шагов.

Диалоговое окно dialog используют, чтобы предложить пользователю ввести информацию, совершить дополнительное действие с интерфейсом или получить его согласие. Когда нужно прервать процесс или сессию, чтобы сообщить о чём-то важном, используйте другой тип диалогового окна alertdialog.