ARIA: timer 角色

timer 角色用于向辅助技术表明一个元素是一个数值计数器，用于列出从起点开始经过的时间量或直到终点所剩余的时间量。辅助技术不会播报计时器的更新，因为它具有隐式 aria-live 值为 off。

html

<div role="timer" id="eggtimer">0</div>

这定义了这个 div 元素为一个没有剩余时间的计时器。

描述

timer 角色用于向辅助技术表明这部分网页内容是一个实时区域，其中包含一个列出剩余时间或已用时间的计时器。计时器的内部文本应该是一个不断更新的当前时间测量值。虽然该值不一定需要机器可解析，但除非计时器暂停或到达终点，否则它应在固定时间间隔内持续更新。

与 alert、log、marquee 和 status 一样，timer 角色也是一个实时区域，并且可以由实时区域属性进行修改。

关联的 WAI-ARIA 角色、状态和属性

aria-label 或 aria-labelledby: 有些屏幕阅读器在播报计时器元素的内容之前会先播报其名称。如果名称可见，请使用 aria-labelledby 进行引用。包含 aria-label 提供了一种方法，可以使用未显示在屏幕阅读器读取内容时显示的文本来为计时器元素的可见内容加上前缀。命名计时器不是必需的，因此如果没有合适的名称，可以省略这两个属性。
aria-live: 具有 timer 角色的元素具有隐式 aria-live 值为 off。

<div id="countdown" role="timer" aria-atomic="true">
  <span id="number">30</span> seconds left!
</div>

css

html {
  font-size: 50px;
  text-align: center;
  margin-top: 1em;
  font-family: sans-serif;
}

#number {
  font-family: monospace;
  color: #cc0000;
  font-weight: bold;
  font-size: 1.25em;
  vertical-align: middle;
}

const numElement = document.getElementById("number");
const liveRegion = document.getElementById("countdown");
let startTime = new Date().getTime();

function decrement() {
  const timeNow = new Date().getTime();
  const elapsedTime = Math.floor((timeNow - startTime) / 1000);
  let newNumber = 30 - elapsedTime;

  if (newNumber >= 0) {
    numElement.textContent = newNumber;
  }

  if (newNumber === 10) {
    liveRegion.setAttribute("role", "alert");
    setTimeout(() => {
      liveRegion.setAttribute("role", "timer");
    }, 999);
  }
}

window.setInterval(() => {
  decrement();
}, 500);