alert

Относится к категории ролей изменяющихся областей. Делает часть страницы 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". Роль можно использовать для всех тегов.

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

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

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

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