Imagine I have the following sentence written in HTML:
<p>Please input your licence number</p>
An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide a phonetic spelling for the screen-reader while keeping the visual text unchanged.
To achieve this, I consider using <span>
elements, aria-
attributes, and styling like so:
<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>
Although this method works to some extent, it causes the screen-reader (specifically VoiceOver on MacOS in my case) to pause at the first span. This requires an additional action ([VO]+[Right Arrow]) to continue reading smoothly:
"Please enter your" ... [VO]+[Right Arrow] ... "lice-ens" ... [VO]+[Right Arrow] ... "number"
I desire for the screen-reader to read the complete sentence without interruptions. Is there a way to accomplish this, or should I refrain from trying to manage this behavior?