使用aria-live的计时器如何让屏幕阅读器仅首次渲染播报一次？

核心逻辑是利用aria-live仅在存在对应属性、且内容发生变更时才会触发播报的特性，实现单次播报需求，具体可选用以下两种方案：

方案1：动态移除aria-live属性（最简单） #

首次渲染时加上aria-live属性触发播报，确认屏幕阅读器捕获内容后移除该属性，后续内容更新就不会再触发播报：

const timerEl = document.getElementById('countdown-timer')
let count = 59

// 首次渲染内容+加aria-live触发播报
timerEl.textContent = `倒计时${count}秒`
timerEl.setAttribute('aria-live', 'polite')

// 延迟150ms移除属性，确保屏幕阅读器已捕获首次内容
setTimeout(() => {
  timerEl.removeAttribute('aria-live')
}, 150)

// 后续倒计时更新不会触发播报
const timer = setInterval(() => {
  count--
  timerEl.textContent = `倒计时${count}秒`
  if (count <= 0) clearInterval(timer)
}, 1000)

方案2：拆分可见区域与播报区域（兼容性更好） #

将展示倒计时的可见元素和负责播报的aria-live区域分开，播报区域仅首次赋值一次，后续不做修改：

1. 先加仅屏幕阅读器可见的通用样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. HTML结构拆分：

<!-- 可见倒计时，不加aria-live，正常更新 -->
<div id="visible-countdown"></div>
<!-- 隐藏的播报区域，仅赋值一次 -->
<div id="live-region" aria-live="polite" class="sr-only"></div>

3. JS逻辑：

const visibleTimerEl = document.getElementById('visible-countdown')
const liveRegionEl = document.getElementById('live-region')
let count = 59

// 仅首次给播报区域赋值，触发一次播报
liveRegionEl.textContent = `倒计时已启动，共59秒`
// 可见区域正常更新
visibleTimerEl.textContent = count

const timer = setInterval(() => {
  count--
  visibleTimerEl.textContent = count
  if (count <= 0) {
    clearInterval(timer)
    // 如果需要结束时额外播报，可在这里给liveRegionEl赋值结束提示
    // liveRegionEl.textContent = '倒计时结束'
  }
}, 1000)

注意事项 #

• 普通倒计时使用aria-live="polite"即可，不要用assertive，避免打断用户当前操作
• 两种方案均兼容NVDA、VoiceOver、TalkBack等主流屏幕阅读器

内容的提问来源于stack exchange，提问作者PN Ngoc Quynh