Клавиша / esc

alert

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

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

Кратко

Скопировано

Относится к категории ролей изменяющихся областей. Делает часть страницы изменяющейся или «живой» областью. Предназначена для важной и, как правило, срочной информации, появляющейся в определённой момент времени.

Пример

Скопировано
        
          
          <div role="alert">  Время сеанса скоро истечёт.</div>
          <div role="alert">
  Время сеанса скоро истечёт.
</div>

        
        
          
        
      
        
          
          <div role="alert">  Соединение с сервером было потеряно, поэтому локальные изменения не будут сохранены.</div>
          <div role="alert">
  Соединение с сервером было потеряно, поэтому локальные изменения не будут сохранены.
</div>

        
        
          
        
      
        
          
          <div role="alert">  <p>Сервер сейчас перегружен. Попробуйте подключиться через час.</p></div>
          <div role="alert">
  <p>Сервер сейчас перегружен. Попробуйте подключиться через час.</p>
</div>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано

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

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

Особенности

Скопировано

Добавление элементу role="alert" эквивалентно aria-live="assertive" и aria-atomic="true".

Рекомендации по использованию

Скопировано
  • Роль нужна только для динамического содержимого, а не когда оно появляется при загрузке страницы.
  • Используйте только для той информации, о которой нужно срочно сообщить. Например, что введённые в форму данные не сохранены из-за потери соединения с сервером.
  • Добавляйте к элементу с предупреждением, а не к элементу, который его вызывает.
  • Используйте только для текстового содержимого, а не для интерактивных элементов, к примеру <button> или <a>.
  • Не устанавливайте на alert фокус. Пользователям не нужно взаимодействовать с таким элементом, а вспомогательные технологии объявят о содержимом автоматически. Это не зависит от того, где находится фокус клавиатуры при добавлении роли alert или при изменении содержимого элемента с этой ролью.
  • Старайтесь не использовать больше одного уведомления одновременно. Это ухудшает пользовательский опыт, поскольку срочные уведомления — самый навязчивый метод донесения информации.
  • Очистите содержимое элемента перед тем, как повторно рендерить предупреждение, когда запускаете одно и то же оповещение несколько раз. Например, если добавляете одинаковый текст в элемент через JavaScript. В этом случае браузер не считает это изменением.

Также убедитесь, что при загрузке страницы в разметке есть элемент с ролью alert, что он не содержит текст или скрыт по умолчанию через display: none. Иначе вспомогательные технологии прочитают содержимое элемента при загрузке страницы как другой текст. Как и в других «живых» областях, оповещения объявляются только при изменении содержимого элемента с ролью alert.

Можно визуально скрыть элемент alert, но оставить его видимым для вспомогательных технологий с помощью CSS и утилитарного класса .visually-hidden.

У менее срочных динамических изменений должны быть другие методы объявления, например, aria-live="polite" или роль status. Если пользователь может закрыть оповещение, используйте вместо alert роль alertdialog.

Как понять

Скопировано

Изменяющаяся область — это область страницы, в которой содержимое обновляется из-за внешних событий или действий пользователей. Благодаря изменяющимся областям вспомогательные технологии узнают об обновлениях на странице и автоматически рассказывают о них пользователям.