alertdialog

Роль окна alertdialog нужна для диалогового окна с важной информацией. Обычно это модальные диалоговые оповещения. Они прерывают действия пользователей и показывают важные сообщения, которые можно принять или отклонить. Например, согласен ли пользователь удалить данные или подтверждение о переводе денег.

Модальное диалоговое окно:

        
          
          <div  role="alertdialog"  aria-labelledby="label"  aria-describedby="description"  aria-modal="true">  <h3 id="label">Ошибка!</h3>  <p id="description">    Что-то пошло не так. Пожалуйста, попробуйте ещё раз позже.  </p>  <button>Закрыть</button></div>
          <div
  role="alertdialog"
  aria-labelledby="label"
  aria-describedby="description"
  aria-modal="true"
>
  <h3 id="label">Ошибка!</h3>
  <p id="description">
    Что-то пошло не так. Пожалуйста, попробуйте ещё раз позже.
  </p>
  <button>Закрыть</button>
</div>

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

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

Сделайте диалоговое окно модальным с помощью aria-modal. Этот элемент прерывает работу, и пока он открыт, пользователи не могут взаимодействовать с остальным содержимым.

Добавьте внутрь окна хотя бы один элемент, на который можно сделать фокус. Обычно это кнопка с текстом «Хорошо» или «Принять». При открытии окна фокус должен быть на этом элементе.

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

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

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

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

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

alertdialog объединяет роли alert и dialog. Это тип диалогового сообщения, которое рассказывает о чём-то важном как alert, но при этом требует ответа пользователя.

Если у важного сообщения или предупреждения нет интерактивных элементов и это просто текст на странице, используйте роль alert.