Кратко
СкопированоРоль окна 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
, лучше к <div>
или <dialog>
. Благодаря этой роли пользователи вспомогательных технологий поймут, что содержимое такого элемента отделено от остального содержимого страницы и содержит важное сообщение.
Сделайте диалоговое окно модальным с помощью aria
. Этот элемент прерывает работу, и пока он открыт, пользователи не могут взаимодействовать с остальным содержимым.
Добавьте внутрь окна хотя бы один элемент, на который можно сделать фокус. Обычно это кнопка с текстом «Хорошо» или «Принять». При открытии окна фокус должен быть на этом элементе.
Чтобы диалоговое окно стало доступным, нужно ещё:
- добавить правильную подпись;
- поработать над фокусом с клавиатуры;
- добавить нужные стили для самого окна и элементов вокруг.
Добавить подпись для диалогового окна можно с помощью aria
, когда в окне есть видимый заголовок, или aria
, если видимого заголовка нет. Используйте для тега с подписью id
с таким же значением, как у aria
. Это свяжет диалоговое окно с заголовком.
У диалогового окна может быть и его расширенное описание. В этом случае используйте aria
.
Если использовать HTML-тег <dialog>
, то не придётся делать большинство из этих шагов.
Как понять
Скопированоalertdialog
объединяет роли alert
и dialog
. Это тип диалогового сообщения, которое рассказывает о чём-то важном как alert
, но при этом требует ответа пользователя.
Если у важного сообщения или предупреждения нет интерактивных элементов и это просто текст на странице, используйте роль alert
.