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.

        
          
          <div  role="dialog"  aria-labelledby="label"  aria-modal="true">  <h3 id="label">Ежегодная подписка</h3>  <!-- Остальное содержимое окна--></div>
          <div
  role="dialog"
  aria-labelledby="label"
  aria-modal="true"
>
  <h3 id="label">Ежегодная подписка</h3>
  <!-- Остальное содержимое окна-->
</div>

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

        
          
          <div  role="dialog"  aria-label="Ежегодная подписка"  aria-modal="true">  <!-- Остальное содержимое окна--></div>
          <div
  role="dialog"
  aria-label="Ежегодная подписка"
  aria-modal="true"
>
  <!-- Остальное содержимое окна-->
</div>

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

У диалогового окна может быть дополнительное описание. Оно пригодится в окнах с названиями, которые не до конца раскрывают их содержимое. Описания связывают через aria-describedby.

        
          
          <div  role="dialog"  aria-labelledby="label"  aria-describedby="description"  aria-modal="true">  <h3 id="label">Условия акции</h3>  <p id="description">    Получите билет на балет со скидкой.  </p>  <p>    Чтобы получить скидку, запишите видео с тем,    как вы прыгаете через горящее кольцо. Чтобы усилить    свои позиции, можете ещё переплыть ров с крокодилами.  </p>  <button>Закрыть</button></div>
          <div
  role="dialog"
  aria-labelledby="label"
  aria-describedby="description"
  aria-modal="true"
>
  <h3 id="label">Условия акции</h3>
  <p id="description">
    Получите билет на балет со скидкой.
  </p>
  <p>
    Чтобы получить скидку, запишите видео с тем,
    как вы прыгаете через горящее кольцо. Чтобы усилить
    свои позиции, можете ещё переплыть ров с крокодилами.
  </p>
  <button>Закрыть</button>
</div>

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

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

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

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

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

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

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

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

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

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

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