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

问题

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

Please enter your licence number

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 s, aria- attributes and styling as follows:

Please enter your licencelicense number

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?

回答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.

回答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. :)

回答3:

This works, sort of:

<span aria-label="license">licence</span>

If the span element is the AT's focus, it would be announced as having a role of "group", which can be overridden with an aria-roledescription attribute (only non-whitespace values allowed). The role is not described when reading sentences or paragraphs.

来源：https://stackoverflow.com/questions/43491644/how-can-i-override-a-screen-readers-pronunciation-of-a-word-in-a-sentence-witho

标签

html

css

accessibility

voiceover

screen-readers