NVDA屏幕阅读器无法读取含v-html属性标签内容的问题咨询

核心原因 #

• Vue的v-html指令会完全替换所在标签的所有内部内容，你写在标签内的插值、spring theme标签都会被直接覆盖，不会实际渲染到DOM中，自然无法被NVDA识别。
• NVDA等屏幕阅读器默认不会主动播报动态插入到已渲染DOM的内容，需要显式声明ARIA live区域告知辅助技术监听该区域的内容更新。

解决方案 #

1. 给v-html所在节点添加ARIA live属性
   给sr-only标签增加aria-live="polite"和role="status"属性，告知NVDA该区域内容会动态更新，空闲时主动播报更新后的内容，示例代码如下：

<span 
  class="sr-only"
  aria-live="polite"
  role="status"
  v-html="phoneNumber(doctor.doctorContactsDetails)"
></span>

注意该容器需要在页面初始渲染时就存在DOM中，不要动态生成容器本身，仅让v-html替换内部内容即可。

2. 拆分静态内容与动态v-html内容
   如果需要保留静态的主题文本提示，不要把静态内容和v-html写在同一个标签里，拆分到父节点或同级节点，避免被v-html覆盖，示例如下：

<span class="sr-only">
  <spring:theme code="checkout.doctor.address" />
  <span aria-live="polite" v-html="formatAddress(doctor.doctorAddress)"></span>
</span>

注意事项 #

• 确认你的sr-only类是标准可访问实现，不要包含display: none、visibility: hidden属性，这两个属性会导致内容完全不被辅助技术识别。标准sr-only仅通过绝对定位将内容移出可视区域，保留可访问性。
• 检查v-html返回的内容本身没有添加aria-hidden="true"属性，否则内容会被辅助技术主动忽略。

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