alert

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

        
          
          <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.

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