Clever Geek Handbook

How can I redefine the pronunciation of a word in a sentence without a pause in the middle of the sentence?

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

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

The screensaver mispronounces the word "license" as "liss-ens" (phonetic spelling). It should be expressed "lice-an" (phonetic spelling).

I want to fix this by providing phonetic spelling for the screen reader and the text visually looks the same.

I could use <span>

s attributes , aria-

and style:

<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 VoiceOver on MacOS) stops when it gets to the first range, forcing me to press [VO] + [Right arrow] to go to the next word:

"Please enter your" ... [VO] + [Right arrow] ... "lice-ens" ... [VO] + [Right arrow] ... "Number"

I want the screen reader to read the sentence smoothly without pause.

Is it possible? Or should I not try to control this?

+4


source to share


3 answers


Not.

Actually, don't worry about it. I know it sounds corny, but these are real tips based on years of experience with screen users (and trying to do what you are trying to do).

Most screen reader users are already familiar with how words are spoken with their tools, quirks with abbreviations, dates, times, and more. By trying to override it, you risk confusing your users.

If you talk to a screen reader user, you will most likely find this to be true. This is such a common problem that it reappeared on this WebAIM mailing page this week: http://webaim.org/discussion/mail_message?id=34398

Note this insightful comment from the thread:



In fact, sometimes, if you listen very closely to a conversation with a screen reader, you might catch that we are pronouncing words just like our screen readers - and we don't even know about it.

Definitely don't try to repurpose <ruby>

. In general, if you don't understand the element then don't use it and certainly not how to hack. This can cause problems for people trying to automatically translate content.

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

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

+13


source


I think I have found a solution. This is similar to how VoiceOver works on macOS. (Didn't test it with other screen readers like JAWS.)

The solution is to flip the element <ruby>

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


Displays the correct string and also reads it out with phonetic pronunciation without pause.

But I am open to other / better solutions. Or criticism of the question itself. :)

+2


source


It works like:

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

If an element span

has AT focus, it will be declared as having the "group" role, which can be overridden by the attribute aria-roledescription

( aria-roledescription

only values ​​without spaces). The role is not described when reading sentences or paragraphs.

0


source






More articles:


All Articles