aria-live

Базовый ARIA-атрибут для того, чтобы сделать часть страницы «живой» областью.

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

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

Кратко

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

Свойство изменяющихся областей из 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 — срочные изменения, о них надо рассказать немедленно.
  • polite — не очень важные изменения, можно рассказать о них после другого важного содержимого или завершения действия.
  • off (по умолчанию) — не самые важные изменения, можно рассказать о них после всего остального.

Чаще всего понадобится значение polite.

aria-live можно использовать для всех тегов и ARIA-ролей.

Как понять

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

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

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

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

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