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);