ARIA Live Region 动态更新与无障碍通知实践

概述ARIA Live Region 用于向辅助技术宣布动态变化的内容，如提交状态、后台任务进度等，避免视觉更新对无障碍用户不可见或信息丢失。关键参数与概念- `aria-live`: `offpoliteassertive` 控制播报优先级；推荐 `polite` 以避免打断。`role="status"/"alert"`: 设定区域语义；`status` 通常与 `polite` 搭配。`aria-atomic`: 是否将整个区域作为原子更新播报；用于避免碎片化信息。实践示例<button id="upload">开始上传</button> <p id="live" role="status" aria-live="polite" aria-atomic="true"></p> <script> const live = document.getElementById('live') document.getElementById('upload').addEventListener('click', async () => { live.textContent = '正在上传……' await new Promise(r => setTimeout(r, 1500)) live.textContent = '上传完成' }) </script> 验证方法屏幕阅读器：在 NVDA/VoiceOver 中验证播报顺序与内容完整性。优先级：对比 `polite` 与 `assertive` 在用户输入过程中的影响，避免打断关键任务。性能：频繁更新时节流播报，确保不形成噪音或卡顿。注意事项避免在隐藏（`display:none`）区域更新内容；屏幕阅读器无法感知。为同一类通知复用固定 live 区域，避免创建多个播报源造成混乱。与可视提示（Toast/进度）保持一致，提供多模态反馈。