status

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

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

        
          
          <button aria-controls="message">Сохранить</button><div>  <span role="status" id="message">    <!-- Сюда добавляем текст с помощью JavaScript-->  </span>  <button aria-label="Закрыть">    X  </button></div>
          <button aria-controls="message">Сохранить</button>
<div>
  <span role="status" id="message">
    <!-- Сюда добавляем текст с помощью JavaScript-->
  </span>
  <button aria-label="Закрыть">
    X
  </button>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Добавьте к элементу атрибут role="status". Роль можно использовать для всех тегов и ARIA-ролей. В большинстве случаев лучше остановиться на <output>.

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

status по умолчанию заданы свойство aria-live="polite" и состояние aria-atomic="true". Так что скринридер объявит всё содержимое элемента status после другой, более важной информации.

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

Большинство элементов status не должны оказываться в порядке навигации (фокуса) во время изменений в них. То есть пользователи не должны иметь возможность попасть на них с помощью Tab.

Элементы с ролью status можно подписывать. Для видимой подписи подойдёт атрибут aria-labelledby, а для невидимой — aria-label. Только помните, что хоть на практике и можно добавлять подписи ко всем элементам, спецификация не рекомендует подписывать <div>, <span> и другие неинтерактивные элементы.

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