role="timer" 仅是向辅助技术声明时间语义的ARIA角色，不控制计时逻辑；它需配合aria-live和textContent更新等手动实现才能生效，且依赖JS定时器（如setInterval）驱动。
role="timer" 是什么，它真能控制计时逻辑？
role="timer" 不是 JavaScript 计时器，也不触发任何自动行为。它只是告诉辅助技术（如屏幕阅读器）：“这个元素正在展示一个随时间变化的值，且该值具有时间语义”。浏览器和 DOM 完全不执行计时，setInterval 或 setTimeout 还得你自己写。
什么时候该用 role="timer"？
只在以下场景有意义：
- 页面上有一个实时更新的倒计时或运行时长（比如考试剩余时间、视频播放进度、倒计时抢购）
- 该数值由 JS 动态更新，且对残障用户有操作或感知意义（例如需知道“还剩 12 秒”，而不仅是看到数字跳动）
- 你已确保该元素内容可被辅助技术及时 announce（比如用
aria-live="polite"配合）
常见错误：加了 role="timer" 却没效果
典型现象：屏幕阅读器完全不读、读错频率、或反复重复播报。原因通常是：
- 没配合
aria-live—— 单独role="timer"不会触发播报，必须加aria-live="polite"或aria-live="assertive" - 更新方式不兼容 —— 直接 innerText 赋值可能被忽略，推荐用
textContent或先清空再 append - 更新太频繁 —— 每秒更新多次会导致屏幕阅读器卡顿或跳读，建议限制在每秒最多一次有效变更
- 父容器干扰 —— 如果
role="timer"元素被包裹在role="region"或隐藏祖先中，部分读屏会跳过
最小可行示例（含关键细节）
<div role="timer" aria-live="polite" aria-atomic="true"> 剩余时间：00:47 </div>
JS 更新时建议这样写：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const timerEl = document.querySelector('[role="timer"]');
// 每秒更新一次，且只在值真正变化时设 textContent
timerEl.textContent = `剩余时间：${mm}:${ss}`;
aria-atomic="true" 很关键：它让屏幕阅读器把整个字符串当整体读，而不是只读变化的部分（避免读成“零零 colon 四七”）。
真正难的是同步性——JS 更新时机、读屏缓冲、浏览器重绘节奏三者稍有错位，用户就可能漏掉关键秒数。别依赖 role 自动“工作”，它只是语义标签，不是计时引擎。
