role="timer" 仅提供语义标注，不触发自动播报；必须配合 aria-live="polite"（推荐）才能使屏幕阅读器播报倒计时变化，且需直接作用于动态文本元素，整段更新textcontent，暂停时设 aria-busy="true"，ios需降级使用 aria-label 或 aria-valuenow 兜底。
role="timer" 本身不触发自动播报，必须配合 aria-live
仅加 role="timer" 不会让屏幕阅读器持续读出倒计时变化。它只是语义标注，告诉辅助技术“这是个计时器”，但不会主动监听或播报内容更新。真正起作用的是 aria-live——只有当元素内容变更时，aria-live="polite" 或 aria-live="assertive" 才会触发播报。
常见错误是只写：<div role="timer">00:45</div>
结果屏幕阅读器完全静默。必须让该元素可被 live region 检测到：
-
role="timer"元素需同时设置aria-live="polite"（推荐）或aria-live="assertive" - 不能把
aria-live放在父容器上而让子元素更新——live region 必须直接包裹动态文本 - 避免频繁触发 assertive（每秒都报会打断用户），倒计时用
polite更合适
更新数值时要整段替换，别只改 innerText 的部分字符
屏幕阅读器对 DOM 变更的感知依赖于节点级更新。如果用 element.textContent = "00:" + seconds 是安全的；但若用 element.firstChild.nodeValue = "45" 修改文本节点内部，某些读屏（如 NVDA + Firefox）可能不触发播报。
实操建议：
- 始终用
textContent或innerText整体赋值，不要尝试局部 DOM 操作 - 避免使用
innerHTML插入 HTML 标签（除非必要），否则可能破坏 aria-live 行为或引入冗余朗读 - 若需格式化（如加冒号、补零），在 JS 中拼好完整字符串再一次性赋值
示例正确写法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const timerEl = document.querySelector('[role="timer"]');<br>function updateTimer(mm, ss) {<br> timerEl.textContent = `${mm.toString().padStart(2, '0')}:${ss.toString().padStart(2, '0')}`;<br>}
计时器暂停/恢复时要同步控制 aria-busy 和视觉状态
当用户点击暂停，光更新数字不够——屏幕阅读器需要知道“这个计时器当前未运行”。此时应补充 aria-busy="true" 并配合视觉提示（如灰掉文字、加暂停图标），否则用户可能误以为还在走。
关键点：
- 运行中：移除
aria-busy或设为false，确保aria-live正常工作 - 暂停时：设
aria-busy="true"，并用 CSS 隐藏或弱化计时器区域（避免误操作） - 恢复时：清除
aria-busy，再立即更新一次数值（触发一次播报，确认已恢复） - 不要依赖
aria-hidden隐藏暂停中的计时器——这会让用户彻底丢失该控件
移动端 Safari + VoiceOver 对 role="timer" 支持有限，得降级兜底
iOS 16+ 开始支持 role="timer"，但旧版 Safari（尤其 iOS 14–15）基本忽略该 role，且 aria-live 在定时器场景下响应不稳定。这时候不能只靠 ARIA。
稳妥做法：
- 给计时器元素加
aria-label初始描述，例如aria-label="倒计时剩余 2 分钟 30 秒"，并在每次更新时同步更新该属性 - 用
aria-valuenow/aria-valuemin/aria-valuemax模拟进度式语义（虽然不是标准用法，但在 iOS 上更可靠） - 测试时务必在真机上用 VoiceOver 手动验证节奏：是否每秒都报？暂停后是否停止？恢复后是否重新开始？
容易被忽略的一点：iOS 上 aria-live="polite" 在快速连续更新时（如毫秒级）可能合并播报或丢帧，倒计时建议至少 1 秒一更，别用 100ms 粒度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
