Search code examples
htmljspscreen-readersnvda

NVDA not reading v-html tags

NVDA Screen reader is reading following:

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

But not reading the following with v-html content in it:

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

Tried adding spring theme in it, still no luck:

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

  • Try adding the spring:theme content before the data that you want your screen reader to read: Here is the order: (span class for sr-only) spring:theme (data to read)

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

    Close span tags accordingly