VoiceOver忽略aria-live区域lang属性始终以系统语言播报如何调整

核心结论 #

该现象是VoiceOver在aria-live实时区域实现上的已知行为偏差，和你设置全局荷兰语环境、为实时区域单独标注lang="nl"的基础配置没有冲突，本质是两类语音播报逻辑的规则不匹配导致的。

具体问题拆解 #

• 常规的逐节点浏览场景下，VoiceOver会正常识别DOM树中逐层级继承的lang属性，匹配对应语言的发音套件完成播报，这也是你页面大部分文本语音输出正常的原因。
• aria-live实时区域的文本播报是完全独立的触发逻辑：当实时区域内的文本发生更新时，VoiceOver会跳过常规的DOM语言属性逐次校验流程，优先调取文本更新触发瞬间缓存的语言配置，不会实时读取动态修改的节点lang属性值，最终大概率使用系统默认语言完成播报。
• 你当前的代码执行顺序会进一步放大识别失效的问题：在按钮点击的回调函数中，先修改output元素的lang属性、再替换节点内部文本的操作，会让VoiceOver在捕捉到文本更新事件的瞬间，无法同步拿到最新设置的语言配置——毕竟lang属性的变更本身不属于aria-live的监听范围，VoiceOver会直接沿用上一次播报缓存的语言设置完成本次输出。

可落地的调整方向 #

• 调整属性与文本的更新顺序：先清空实时区域的原有内容，再设置新的lang属性值，最后填充对应语言的文本内容，给VoiceOver留出读取节点语言属性的时间窗口
• 规避动态修改实时区域lang属性的操作：提前为不同语言的实时文本准备独立的aria-live容器，每个容器在静态HTML上提前写死对应的lang属性，需要更新不同语言文本时，仅切换对应容器的显示状态，完全避开动态修改语言属性的场景
• 提前校验系统语音环境：如果设备中没有安装对应语言的语音包，无论页面如何设置lang属性，VoiceOver都会强制回退到系统默认语言播报，这是系统层级的硬限制

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