aria-live

Свойство изменяющихся областей из WAI-ARIA. Делает часть страницы live region или «живой» областью. Благодаря атрибуту вспомогательные технологии узнают обо всех изменениях в такой области.

        
          
          <div id="clock" role="timer" aria-live="polite">  <span id="clock-hours"></span>  <span id="clock-mins"></span></div>
          <div id="clock" role="timer" aria-live="polite">
  <span id="clock-hours"></span>
  <span id="clock-mins"></span>
</div>

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

Добавьте к тегу атрибут aria-live с одним из трёх значений:

• assertive — высший приоритет изменений, о них надо рассказать немедленно. Менее важные изменения будут озвучены после. Используется в элементах с role="alert".
• polite — низкий приоритет изменений, можно рассказать о них после другого важного содержимого или завершения действия. Так ведут себя элементы с role="status" и role="log".
• off (по умолчанию) — низший приоритет, об изменениях не нужно рассказывать без фокуса на области. Используется в элементах с role="marquee" и role="timer".

Чаще всего используют значение polite.

aria-live можно использовать для всех тегов и ARIA-ролей. Внутри контейнера с атрибутом могут быть тексты и интерактивные элементы, но не добавляйте туда содержимое, которое никак не изменяется.

Изменяющаяся область с aria-live включает в себя элемент и его потомков. Если у элемента нет атрибута aria-live, то значение берётся из ближайшего родителя с этим атрибутом.

В примере показано, как будет читаться высшее по приоритету значение assertive при одновременном изменении содержимого. Для того, чтобы услышать результат, используйте скринридер:

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

💡 Не стоит использовать значение assertive без серьёзной необходимости, потому что прерывание объявлений скринридера может дезориентировать пользователей или помешать им выполнить текущую задачу.

💡 На сайте с поддержкой ARIA-атрибутов можно увидеть, какие вспомогательные технологии поддерживают aria-live.

💡 Чтобы испытать работу изменяющихся областей, можно воспользоваться интерактивным примером Deque или демку из статьи про изменяющиеся области.

На собеседовании

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

Задать вопрос в рубрику

🤚 Я знаю ответ

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