实时区域

实时区域是 DOM 中当内容发生变化时，会自动向屏幕阅读器用户播报的部分——无需移动焦点，无需用户主动导航至该区域，也无需刷新页面。

实时区域是所有”提示：商品已加入购物车”通知、“错误：请填写邮箱地址”表单验证提示，以及屏幕阅读器用户实际听到的搜索结果数量更新背后的实现机制。

基本属性

最简单的实时区域是带有 aria-live="polite" 的 div：

<div aria-live="polite" id="status">
  <!-- 此处内容变化时将被播报 -->
</div>

当 JavaScript 向 #status 插入文本时，屏幕阅读器会在下一个自然停顿时播报新内容——不会打断用户正在阅读的内容。

polite 与 assertive 的区别

aria-live 有两个操作值：

• polite — 等待用户空闲后再播报。适用于大多数通知：确认信息、搜索计数、状态消息。
• assertive — 立即打断用户当前的阅读并播报。仅用于真正紧急的消息：严重错误、会话过期警告、时效性提示。

过度使用 assertive 是实时区域最常见的失误。每一条次要提示都触发 assertive，屏幕阅读器便会频繁打断用户，最终促使用户彻底关闭实时区域。

ARIA 派生的替代方案

部分 ARIA 角色会自动隐含 aria-live：

• role="alert" → 行为等同于 aria-live="assertive"。
• role="status" → 行为等同于 aria-live="polite"。
• role="log" → 礼貌模式，在概念上表示仅追加的日志（聊天记录、控制台输出）。
• role="timer" → 礼貌模式，用于倒计时器。

选用角色通常比直接设置 aria-live 值更清晰——因为它明确记录了该区域的用途。

实践中的常见问题

• 实时区域与内容同时添加。 ARIA 仅播报已在 DOM 中存在的实时区域内容的变化。将 <div aria-live="polite">已加载</div> 作为整体插入不会触发播报——区域和内容同时到达。解决方案：在页面加载时保留空的实时区域，稍后再填充内容。
• 更新过于频繁。 每秒多次向实时区域插入文本，会导致前一条播报尚未完成就被刷新。用户只听到片段。应对更新进行节流或防抖处理。
• 本应使用焦点的场景错误地使用了实时区域播报。 若消息是由用户的主动操作触发的，将焦点移动到消息（或相关控件）通常优于依赖实时区域播报。实时区域适用于被动通知。
• 实时区域中存在装饰性噪音。 实时区域包含加载动画、图标和时间戳等内容时，屏幕阅读器会在每次更新时读出所有内容。应将区域内容仅限于消息本身。