Кратко
СкопированоРоль изменяющихся областей. Делает часть страницы 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
по умолчанию есть свойства aria
и aria
.
Скринридер объявит сообщение с ролью status
после другой, более важной информации.
Элементы с ролью status
не должны быть в порядке фокуса.
Если сообщение со status
появляется после взаимодействия с кнопкой или другим элементом, свяжите их друг с другом с помощью атрибута aria
.
Как понять
Скопировано«Живая» область — это область страницы, в которой что-то постоянно обновляется из-за внешних событий. Например, появляется уведомление или ошибка, когда пользователь сделал что-то неправильно. Так пользователи скринридеров могут узнать об изменениях автоматически, без перехода к этой части страницы.
Роль status
пригодится для сообщений из статусной строки и похожей информации. К примеру, для сообщения об успешном сохранении данных.