timer

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

        
          
          <div role="timer">  <span id="timer-hours">00</span>  <span id="timer-mins">00</span></div>
          <div role="timer">
  <span id="timer-hours">00</span>
  <span id="timer-mins">00</span>
</div>

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

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

Внутри контейнера с ролью таймера не обязательно использовать <time> и указывать время в машиночитаемом формате. Это могут быть обычные цифры и текст.

По умолчанию у timer есть свойство aria-live="off". Так что скринридеры не расскажут об изменениях до того, как пользователь сделает на фокус на области с этой ролью.

Чтобы изменить поведение роли, используйте aria-live со значением polite и JavaScript. Переключайте значение c polite на off или удаляйте весь атрибут через нужные интервалы времени. Например, каждые 60 минут. Так объявления не будут навязчивыми. В большинстве случаев лучше не изменять поведение timer. Например, постоянно рассказывать о том, сколько часов, минут и секунд осталось до Чёрной пятницы, — не самая лучшая идея. Пользователям скринридеров будет мучительно это слушать 😫 Другое дело — отсчёт времени до конца теста или на выполнение банковской операции. В этом случае пользователям важно знать, сколько у них осталось времени.

Атрибут aria-atomic="true" поможет улучшить таймер. Благодаря ему вспомогательные технологии расскажут про всё содержимое таймера, а не только про изменившиеся часы, секунды или минуты. Например, таймер отсчитывает две минуты в обратном направлении. Когда остаётся 59 секунд, без aria-atomic скринридер расскажет только о минутах: «Ноль минут». Так что пользователи могут подумать, что время вышло, хотя у них осталась ещё пара секунд. Чтобы объявления не были назойливыми, устанавливайте интервалы между объявлениями. Это удобно делать функцией setInterval(). Так можно добавлять и удалять aria-live="true" через нужные промежутки времени.

В примере элементу, в котором отсчитывается время, заданы role="timer" и aria-atomic="true". После того, как время вышло, появляется сообщение «Время вышло!». aria-live удаляется и добавляется через секунду после начала отсчёта, потом через минуту и затем за 10 секунд до завершения.

Подсказки про то, минуты это или секунды, добавлены с помощью псевдоэлемента ::after и content. Скринридеры всегда зачитывают текст из этого CSS-свойства.

        
          
          <h2>Оставшееся время</h2><div  role="timer"  id="timer"  aria-atomic="true">  <span id="min">02</span>  <span id="sec">00</span></div><div id="message" aria-live="polite"></div>
          <h2>Оставшееся время</h2>
<div
  role="timer"
  id="timer"
  aria-atomic="true"
>
  <span id="min">02</span>
  <span id="sec">00</span>
</div>
<div id="message" aria-live="polite"></div>

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

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

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