Web 可访问性实时区域（Accessibility Live Regions）

1. 实时区域的基本定义
   Web 可访问性实时区域是网页中的特定标记区域，用于向辅助技术（如屏幕阅读器）动态通知内容的变化。当区域内的内容通过 JavaScript 更新时，屏幕阅读器会自动朗读新内容，无需用户手动聚焦到该区域。例如，实时天气预报更新或表单提交后的成功提示消息。

2. 实时区域的实现原理
   通过 ARIA（可访问性富互联网应用）属性标记实时区域：

   • aria-live：定义区域的优先级，可选值包括：
     • "polite"：屏幕阅读器在完成当前任务后通知变化（适合非紧急更新）。
     • "assertive"：立即中断当前朗读以播报变化（仅用于关键信息）。
     • "off"：默认值，禁用实时通知。
   • aria-atomic：
     • "true"：朗读整个区域内容（即使仅部分变化）。
     • "false"：仅朗读变化的部分内容。
   • aria-relevant：指定触发通知的变化类型（如 "additions"、"text"、"all"）。

3. 实际应用场景与代码示例
   场景：异步加载的搜索结果列表。

   <div aria-live="polite" aria-atomic="false" id="search-results">  
     初始结果...  
   </div>  
   

   当 JavaScript 更新 #search-results 内容时，屏幕阅读器会礼貌地播报新结果，而用户无需离开当前焦点。

4. 高级行为控制

   • 动态角色适配：结合 aria-live 与 role="alert" 可实现隐式实时区域（自动等效于 aria-live="assertive"）。
   • 冗余控制：通过 aria-relevant="additions" 避免重复播报未变化内容。
   • 延迟加载兼容性：在内容插入 DOM 前设置 aria-live，确保辅助技术捕获初始状态。

5. 跨浏览器与辅助技术注意事项

   • 不同屏幕阅读器（如 JAWS、NVDA、VoiceOver）对 aria-live 的响应延迟可能存在差异。
   • 避免滥用 assertive 模式，频繁中断会干扰用户操作流程。
   • 静态内容无需标记实时区域，仅适用于动态更新的关键信息。