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>  <a href="#details">Детали заказа</a></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>
  <a href="#details">Детали заказа</a>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридеры прочитают демку примерно так: «Ваш заказ был отправлен. Диалог. Заказ будет доставлен в течение следующих три–пять рабочих дней. Закрыть, кнопка».

Добавьте к тегу role="dialog", лучше всего к <div>. Благодаря этой роли пользователи вспомогательных технологий поймут, что содержимое такого элемента отделено от остального содержимого страницы.

Обязательно вложите внутрь dialog интерактивный элемент. Например, кнопку или ссылку.

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

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

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

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

Когда создаёте модальное диалоговое окно с ролью dialog, добавьте к нему атрибут aria-modal="true". В случае немодального диалога добавьте aria-modal="false".

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

С ролью dialog можно сочетать все глобальные ARIA-атрибуты.

Пример модального диалогового окна в Руководстве по авторским ARIA-практикам (APG).

В dialog встроен атрибут aria-live со значением assertive. Из-за этого скринридеры сразу же читают содержимое окна, когда оно появляется на странице.

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

• первый интерактивный элемент;
• кнопка для закрытия окна с текстом «Согласен», «Да» и другими вариантами названий;
• первый параграф, если в окне большой текст.

Когда пользователь закрывает окно, верните фокус на кнопку, которая его открыла. Если кнопка исчезает, установите фокус на следующем элементе после неё.

Дополнительно диалоговые окна должны закрываться при нажатии на Esc. Также хорошая практика поддерживать закрытие окна по клику на странице вне его области.

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