status

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

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

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

Кратко

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

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

У <output> эта роль есть по умолчанию.

Пример

Секция статьи "Пример"
        
          
          <button aria-controls="message">Сохранить</button><p role="status" id="message">  Данные успешно сохранены!</p>
          <button aria-controls="message">Сохранить</button>
<p role="status" id="message">
  Данные успешно сохранены!
</p>

        
        
          
        
      

Как пишется

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

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

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

Скринридер объявит сообщение с ролью status после другой, более важной информации.

Элементы с ролью status не должны быть в порядке фокуса.

Если сообщение со status появляется после взаимодействия с кнопкой или другим элементом, свяжите их друг с другом с помощью атрибута aria-controls.

Как понять

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

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

Роль status пригодится для сообщений из статусной строки и похожей информации. К примеру, для сообщения об успешном сохранении данных.