iOS VoiceOver下role=log重挂载后屏幕阅读器重复朗读问题求解

问题复现 #

开发实时聊天类轻应用时，需要屏幕阅读器自动朗读新收到的消息，最初通过给消息容器加role="log"（隐式等价于aria-live="polite"的ARIA直播区域）实现该能力，初始DOM结构如下：

<div id="canvas">
    <div id="messages" role="log">
        <ul id="test">
            <li>Row 1</li>
            <li>Row 2</li>
        </ul>
    </div>
</div>

业务逻辑中需要清空父容器#canvas后重新生成内部内容，最初使用的清空代码为：

document.getElementById("canvas").innerHTML = "";

测试发现清空父容器后重新填充列表时，iOS VoiceOver会把所有列表项全部重新朗读一遍，不符合预期——需求是保留朗读状态，不重复播报已经读过的旧内容。
后续尝试先缓存role="log"对应的消息容器节点，清空#canvas后再把缓存的节点重新挂载回去，代码如下：

let cache = document.getElementById("messages")
document.getElementById("canvas").innerHTML = "";
document.getElementById("canvas").append(cache);

该方案依然会触发全量重朗读，没有解决问题。

核心原因 #

iOS VoiceOver对ARIA直播区域的识别遵循无障碍树的节点生命周期规则：

• 只要直播区域节点从DOM树中被移除，哪怕你持有该节点的JS引用、之后立刻将其重新挂载回DOM，无障碍树都会将其判定为全新插入的直播区域，会默认读取区域内的全部可访问内容，之前的播报记录不会保留。
• 上述缓存方案无效的核心原因是：执行canvas.innerHTML = ""时，#messages节点已经被从DOM树中移除，后续append操作属于重新插入节点，必然触发新直播区域的全量朗读逻辑。
• 目前VoiceOver没有提供任何可配置项，允许直播区域被移除重挂载后保留历史播报状态。

可行方案 #

推荐方案：保持role="log"容器在DOM中稳定存在 #

这是兼容性最好、符合ARIA规范设计预期的方案，实现成本最低：

• 调整DOM结构，将需要动态清空、重绘的非消息内容放到#messages容器外部，作为#canvas下的同级节点存在
• 永远不要移除、重挂载#messages这个直播区域节点本身，所有更新操作只针对它的子节点执行：
  • 新增消息时直接在消息列表尾部追加新的列表项，VoiceOver只会自动朗读新追加的内容，不会重复读旧消息
  • 如果确实需要重绘消息列表，只清空#messages内部的列表容器，不要触碰#messages节点本身；重绘时给所有已经播报过的旧消息加上aria-hidden="true"属性，仅保留未读新消息的可访问状态，即可完全避免重复朗读。

备选方案：手动维护播报状态 #

如果业务场景必须全量清空#canvas（比如整页画布重绘、视图切换等特殊逻辑），可以放弃完全依赖role="log"的默认行为，自行控制播报逻辑：

• 本地维护一个已播报消息的ID集合，每次DOM重绘完成后遍历所有消息项：
  • 已播报过的旧消息统一添加aria-hidden="true"，让屏幕阅读器直接跳过
  • 未播报的新消息保持可访问状态，单独给新消息包裹层加aria-live="polite"触发定向播报
• 该方案需要额外处理焦点管理，避免DOM重绘后焦点丢失影响读屏操作体验。

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