最新版Chrome下NVDA屏幕阅读器无法读取alert提示消息问题咨询

问题1：Chrome环境下添加消息时NVDA不播报"alert..."的原因 #

该问题是Chrome无障碍引擎和NVDA的兼容逻辑差异导致的：

• Chrome的无障碍树默认会直接排除初始状态为display: none的DOM节点，也不会监控这类节点的内容变化。哪怕后续你将节点改为display: block，Chrome也不会主动把节点的内容变更同步给NVDA
• 你同时给错误容器设置了role="alert"和aria-live="polite"两个属性也会加剧表现差异：role="alert"隐式对应aria-live="assertive"，两个属性存在冲突，Firefox识别到冲突就触发了两次播报，Chrome则优先走了aria-live="polite"的逻辑，直接省略了alert前缀。
  Firefox的无障碍引擎额外做了兼容逻辑，节点显示状态变化后会重新扫描内容，所以可以正常触发播报。

问题2：非破坏性修改HTML的修复方案 #

不需要改动现有页面结构，两类调整方案都可以解决问题：

方案1：仅调整样式逻辑（推荐） #

去掉错误容器的display: none初始样式，改用视觉隐藏样式将容器移出可视区域，示例样式如下：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

需要展示错误时移除该类、替换为正常的错误显示样式即可。这样节点从始至终都存在于无障碍树中，内容变化会被Chrome正常监控。
同时删除错误容器的aria-live="polite"属性，仅保留role="alert"即可避免属性冲突，两款浏览器都会统一播报带alert前缀的内容，不会出现重复播报问题。

方案2：仅调整JS逻辑 #

如果完全不想修改CSS，可以在插入错误内容后主动调用errorDiv.focus()，你已经给容器加了tabindex属性，强制聚焦后NVDA会直接播报容器内的内容，不需要依赖实时区域的监控逻辑。

问题3：初始display: none的div内容修改被忽略的性质 #

该行为符合WAI-ARIA规范，不属于Chrome的bug。规范明确要求display: none的元素需要完全从无障碍树中移除，浏览器没有义务监控这类不可访问节点的内容变化。Firefox的处理属于额外的兼容优化，不是标准要求的默认行为。

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