alert

Роль для важной информации, о которой скринридер расскажет пользователю сразу же.

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Роль изменяющихся областей. Делает часть страницы live region или «живой» областью. alert нужна для важной в определённый момент времени информации.

Пример

Секция статьи "Пример"
        
          
          <div role="alert">  Сервер сейчас недоступен. Повторите попытку позже.</div>
          <div role="alert">
  Сервер сейчас недоступен. Повторите попытку позже.
</div>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу атрибут role="alert". Роль можно использовать для всех тегов.

У alert по умолчанию есть свойства aria-live="assertive" и aria-atomic="true".

Скринридер объявит сообщение с ролью alert сразу же, как только оно появится.

Элементы с ролью alert не должны быть в порядке фокуса, а ещё не надо добавлять для них кнопку закрытия.

Важно, чтобы сообщение содержало только текст и появлялось на странице не сразу при загрузке, а динамически.

Как понять

Секция статьи "Как понять"

«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка, когда пользователь сделал что-то неправильно. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.

Роль alert пригодится для важного сообщения об ошибке или предупреждения. К примеру, когда пользователь ввёл неверные данные в поле, заканчивается время сессии или возникла северная ошибка и не сохранились данные, пропало интернет-соединение и подобное.