Кратко
СкопированоРоль изменяющихся областей. Делает часть страницы live region или «живой» областью. alert
нужна для важной в определённый момент времени информации.
Пример
Скопировано<div role="alert"> Сервер сейчас недоступен. Повторите попытку позже.</div>
<div role="alert"> Сервер сейчас недоступен. Повторите попытку позже. </div>
Как пишется
СкопированоДобавьте к тегу атрибут role
. Роль можно использовать для всех тегов.
У alert
по умолчанию есть свойства aria
и aria
.
Скринридер объявит сообщение с ролью alert
сразу же, как только оно появится.
Элементы с ролью alert
не должны быть в порядке фокуса, а ещё не надо добавлять для них кнопку закрытия.
Важно, чтобы сообщение содержало только текст и появлялось на странице не сразу при загрузке, а динамически.
Как понять
Скопировано«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка, когда пользователь сделал что-то неправильно. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
Роль alert
пригодится для важного сообщения об ошибке или предупреждения. К примеру, когда пользователь ввёл неверные данные в поле, заканчивается время сессии или возникла северная ошибка и не сохранились данные, пропало интернет-соединение и подобное.