How can I override a screen-reader's pronunciation of a word in a sentence without having it pause mid-sentence?

Question

Let's say I have the following sentence in HTML:

<p>Please enter your licence number</p>

The screen-reader mis-pronounces the word 'licence' as "liss-ens" (phonetic spelling). It should be pronounced "lice-ens" (phonetic spelling).

I want to fix this by providing a phonetic spelling to the screen-reader, while having the text visually appear the same.

I could use <span>s, aria- attributes and styling as follows:

<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>

This works well enough, except that the screen-reader (I'm testing with VoiceOver on MacOS) pauses when it gets to the first span, forcing me to press [VO]+[Right Arrow] to advance to the next word:

"Please enter your" ... [VO]+[Right Arrow] ... "lice-ens" ... [VO]+[Right Arrow] ... "number"

I want the screen-reader to read out the sentence smoothly without pausing.

Is this possible? Or should I not be trying to control this?

Answer 1

Don't.

Really, don't worry about it. I know that sounds trite but it is real advice based on years of working with screen reader users (and trying to do what you are trying to do).

Most screen reader users are already familiar with how words are spoken by their tools, the quirks associated with abbreviations, dates, times, etc. By trying to override it you run the risk of confusing your users.

If you speak to a screen reader user you will likely find that this is true. It is so common an issue that it came up yet again on this week's WebAIM mailing list: http://webaim.org/discussion/mail_message?id=34398

Note this insightful comment from the thread:

In fact, sometimes if you listen very carefully to a screen reader user talking, you can catch that we will pronounce words the same as our screen readers do--and we are not even aware of it.

Definitely do not try to repurpose <ruby>. In general, if you do not understand an element then do not use it, and certainly not as a hack. That can cause problems for people trying to auto-translate the content.

Also, do not use a hack if you are not prepared to test it across all screen reader and platform combinations (including multiple versions of each screen reader and browser pairing).

Finally, remember that about 1/3 of screen reader users have vision, so sometimes forced pronunciation will mess with what they are seeing on screen.

Answer 2

I think I found a solution. This seems to work with VoiceOver on MacOS. (Haven't tested it with other screen-readers such as JAWS.)

The solution is to repurpose the <ruby> element, using CSS to override its styling:

Please enter your 
<ruby>
  <rt aria-hidden="true" style="font-size: 1em"><!--Standard-->licence</rt>
  <rt style="display: inline-block; width: 1px; height: 1px; overflow: hidden"><!--Phonetic-->license</rt>
</ruby>
 number

This displays the correct string and also reads it out with the phonetic pronunciation without pausing.

But I'm open to other/better solutions. Or critique of the question itself. :)