NVDA 不读取 v-html 标签答案

【问题标题】：NVDA not reading v-html tagsNVDA 不读取 v-html 标签
【发布时间】：2021-10-18 10:37:00
【问题描述】：

NVDA 屏幕阅读器正在阅读以下内容：

<span class="sr-only"><spring:theme code="checkout.doctor.name" /> {{ doctor.firstName.toLowerCase() }} {{ doctor.lastName.toLowerCase() }}</span>

但没有阅读以下带有 v-html 内容的内容：

<span class="sr-only" v-html="phoneNumber(doctor.doctorContactsDetails)">{{ doctor.firstName.toLowerCase() }} {{ doctor.lastName.toLowerCase() }}</span>

尝试在其中添加spring主题，仍然没有运气：

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

【问题讨论】：

似乎更像是一个 vue.js 问题。如果您将该标签添加到您的问题中，您可能会收到更多回复。我不知道 vue.js，但我知道屏幕阅读器和 nvda。如果您可以发布 html 解析的内容，那么我可能会提供帮助。如果您展示 nvda 在有效示例中的说明以及在无效示例中说明的内容，也会有所帮助。

标签： html jsp screen-readers nvda

【解决方案1】：

尝试在您希望屏幕阅读器读取的数据之前添加 spring:theme 内容：顺序如下：（span class for sr-only）spring:theme（要读取的数据）

((span class="sr-only" ) (spring:theme code="checkout.doctor.address" ) (span v-html="formatAddress(doctor.doctorAddress)"))

相应地关闭 span 标签

【讨论】：