关闭无障碍模态框时，如何避免aria-live区域重复播报且锁定虚拟光标？

核心思路 #

解决问题的关键是不通过移除/恢复节点的方式控制背景内容的可访问性，而是通过更精细的焦点管理、无障碍属性动态调整，避免触发live区域的additions检测逻辑。

2025年可靠属性/模式组合 #

1. 原生<dialog>组件 + 自定义虚拟光标拦截 + aria-modal="true"

   • 原生<dialog>调用showModal()方法后，浏览器会自动将焦点限制在模态框内，部分主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）已内置处理背景内容的inert特性
   • 补充优化：
     • 给模态框添加aria-modal="true"，明确告知辅助技术这是模态容器
     • 维护模态框内可交互元素的焦点循环，避免用户按Tab跳出
     • 监听屏幕阅读器虚拟光标移动事件（如JAWS的caretmove、NVDA的focus事件），一旦检测到光标试图移出模态框，强制将焦点拉回模态框内第一个可交互元素；针对VoiceOver，可监听AXFocusedUIElement变化做拦截
   • 优势：无需对背景live区域做隐藏处理，从根源上避免了“节点新增”触发的重复播报

2. aria-hidden="true" + 动态修改live区域aria-relevant属性

   • 打开模态框时：给背景元素设置aria-hidden="true"，同时遍历所有背景中的aria-live="polite"区域，将它们的aria-relevant临时改为"removals"（或空值）
   • 关闭模态框时：先将aria-relevant恢复为默认的"additions text"，再移除aria-hidden="true"
   • 原理：修改aria-relevant后，即使live区域重新加入无障碍树，辅助技术也不会将其识别为“新增内容”，从而避免重复播报

3. inert + 预缓存live区域内容

   • 打开模态框前，提前将所有live区域的内容缓存到变量中
   • 给背景元素添加inert属性
   • 关闭模态框时：先移除inert，再将live区域的内容重置为缓存内容（覆盖临时更新），避免辅助技术将其识别为新增内容

关键注意事项 #

• 单一属性无法实现完整的模态框无障碍，必须结合焦点管理、辅助技术事件拦截、无障碍属性控制三者
• 2025年主流浏览器已原生支持inert和<dialog>的完整无障碍特性，无需额外polyfill
• 测试必须覆盖JAWS、NVDA、VoiceOver三大屏幕阅读器，不同阅读器对虚拟光标的处理逻辑存在差异

内容的提问来源于stack exchange，提问作者tony95