Кратко
СкопированоОтносится к категории ролей изменяющихся областей. Делает часть страницы live region или «живой» областью. Предназначена для важной и, как правило, срочной информации, появляющейся в определённой момент времени.
Пример
Скопировано<div role="alert"> Сервер сейчас недоступен. Повторите попытку позже.</div>
<div role="alert"> Сервер сейчас недоступен. Повторите попытку позже. </div>
<div role="alert"> Время сеанса скоро истечёт.</div>
<div role="alert"> Время сеанса скоро истечёт. </div>
<div role="alert"> Соединение с сервером было потеряно, поэтому локальные изменения не будут сохранены.</div>
<div role="alert"> Соединение с сервером было потеряно, поэтому локальные изменения не будут сохранены. </div>
Как пишется
СкопированоДобавьте к тегу атрибут role
. Роль можно использовать для всех тегов.
Роль alert
используют для уведомления пользователя о важной информации, обычно чувствительной ко времени. При появлении элемента с этой ролью на странице или при её добавлении к существующему элементу, браузер сгенерирует соответствующее событие для вспомогательных технологий, например, для скринридера. Они получат содержимое уведомления и сообщат о нём пользователю.
Особенности
СкопированоДобавление элементу role
эквивалентно aria
и aria
.
Рекомендации по использованию
Скопировано- Роль нужна только для динамического содержимого, а не когда оно появляется при загрузке страницы.
- Используйте только для той информации, о которой нужно срочно сообщить. Например, что введённые в форму данные не будут сохранены из-за потери соединения с сервером.
- Добавляйте к элементу с предупреждением, а не к элементу, который его вызывает.
- Используйте только для текстового содержимого, а не для интерактивных элементов, к примеру
<button>
или<a>
. - Убедитесь, что при загрузке страницы в разметке есть элемент с ролью
alert
, что он не содержит текст или скрыт по умолчанию черезdisplay
. Иначе вспомогательные технологии прочитают содержимое элемента при загрузке страницы как другой текст. Как и в других «живых» областях, оповещения объявляются только при изменении содержимого элемента с ролью: none alert
. - На
alert
нельзя устанавливать фокус. Пользователям не нужно взаимодействовать с таким элементом, а вспомогательные технологии объявят о содержимом автоматически. Это не зависит от того, где находится фокус клавиатуры при добавлении ролиalert
или при изменении содержимого элемента с этой ролью. - У менее срочных динамических изменений должны быть другие методы объявления, например,
aria
или роль- live = "polite" status
. - Если пользователь может закрыть оповещение, используйте вместо
alert
рольalertdialog
. - Старайтесь не использовать больше одного уведомления одновременно. Это ухудшает пользовательский опыт, поскольку alert-уведомления — самый навязчивый метод донесения информации.
- Если запускаете одно и то же оповещение несколько раз, например, когда добавляете одно и то же содержимое в элемент через JavaScript, браузер не считает это изменением. Так что это не приведёт к объявлению. В таких ситуациях «очистите» содержимое элемента перед тем, как повторно рендерить предупреждение.
- Скринридеры мгновенно прерывают предыдущие оповещения, когда появляется уведомление из элемента с
alert
. - Можно визуально скрыть элемент с ролью
alert
, но оставить его видимым для вспомогательных технологий с помощью CSS и утилитарного класса, например,visually
. Только не используйте для этого- hidden display
!: none
Как понять
Скопировано«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка, когда пользователь сделал что-то неправильно. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.