dialog

Как сделать кастомное диалоговое окно так, чтобы вас поняли даже скринридеры.

Время чтения: меньше 5 мин

Кратко

Скопировано

Роль окна 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.