Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Question

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

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?

html css accessibility voiceover screen-readers

Answer 1

Answer №1

Don't.

Please don't stress about it. I understand it may sound cliché, but this advice comes from my extensive experience working with screen reader users (and attempting what you're aiming to do).

Most screen reader users are already well-versed in how their tools vocalize words, including the peculiarities related to abbreviations, dates, and times. By trying to override these settings, you might end up confusing your audience.

If you converse with a screen reader user, they'll likely confirm this. This issue is so prevalent that it was recently discussed on the WebAIM mailing list.

Consider this insightful remark from the discussion:

Interestingly, sometimes if you really pay attention to a screen reader user speaking, you might notice that we inadvertently mimic our screen readers' pronunciation—and we aren't even conscious of it.

Absolutely avoid repurposing <ruby>. If you're unsure about an element, it's best not to include it—especially not as a workaround. This could cause complications for those relying on auto-translated content.

Furthermore, refrain from implementing a hack unless you're willing to test it thoroughly across all screen reader and platform pairings (including various versions of each screen reader and browser).

Lastly, remember that approximately one-third of screen reader users have some degree of vision, so altering pronunciation forcefully can interfere with what they see on their screens.

Answer 2

Don't.

Please don't stress about it. I understand it may sound cliché, but this advice comes from my extensive experience working with screen reader users (and attempting what you're aiming to do).

Most screen reader users are already well-versed in how their tools vocalize words, including the peculiarities related to abbreviations, dates, and times. By trying to override these settings, you might end up confusing your audience.

If you converse with a screen reader user, they'll likely confirm this. This issue is so prevalent that it was recently discussed on the WebAIM mailing list.

Consider this insightful remark from the discussion:

Interestingly, sometimes if you really pay attention to a screen reader user speaking, you might notice that we inadvertently mimic our screen readers' pronunciation—and we aren't even conscious of it.

Absolutely avoid repurposing <ruby>. If you're unsure about an element, it's best not to include it—especially not as a workaround. This could cause complications for those relying on auto-translated content.

Furthermore, refrain from implementing a hack unless you're willing to test it thoroughly across all screen reader and platform pairings (including various versions of each screen reader and browser).

Lastly, remember that approximately one-third of screen reader users have some degree of vision, so altering pronunciation forcefully can interfere with what they see on their screens.

Answer 3

Answer №2

After some trial and error, I may have discovered a solution that is functional with VoiceOver on MacOS. (I have not yet verified its compatibility with other screen-readers like JAWS.)

The workaround involves repurposing the <ruby> element and utilizing CSS to modify its appearance:

To input 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 method not only presents the accurate text but also reads it out phonetically without interruptions.

I am receptive to alternative or more effective solutions. Feedback on the query itself is also welcome. :)

Answer 4

After some trial and error, I may have discovered a solution that is functional with VoiceOver on MacOS. (I have not yet verified its compatibility with other screen-readers like JAWS.)

The workaround involves repurposing the <ruby> element and utilizing CSS to modify its appearance:

To input 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 method not only presents the accurate text but also reads it out phonetically without interruptions.

I am receptive to alternative or more effective solutions. Feedback on the query itself is also welcome. :)

Answer 5

Answer №3

This method seems to be effective:

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

When the span element is the primary focus of an AT, it may be recognized as a "group", which can be altered using an aria-roledescription attribute (only non-empty values are permissible). The designation is not mentioned when scanning through sentences or paragraphs.

Answer 6

This method seems to be effective:

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

When the span element is the primary focus of an AT, it may be recognized as a "group", which can be altered using an aria-roledescription attribute (only non-empty values are permissible). The designation is not mentioned when scanning through sentences or paragraphs.

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Answer №1

Answer №2

Answer №3

Similar questions

Make sure to load the <img> html tag before implementing js masonry for optimal

Retrieve information from the server (using asp.net) using Java Script and store it in the local storage of the client device

Troubleshooting CSS Display Problem on Chrome and Firefox

How can I align an image and text alongside another image using HTML and CSS?

send the value from the input field to the designated button - link the two buttons

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

Text in d3.js vanishing while undergoing rotation

Is there a way to display shortened text only when hovering without altering the height of the list box?

Tips for creating two lines of text within one line using CSS

Chrome DevTools automatically translates all HEX color codes into their corresponding RGB values

Extracting outer td data from a td element containing an inner table using JSoup

Mastering the art of CSS float and positioning techniques

JavaScript does not display checkbox values

Using PHP and an HTML form to insert data into a MySQL database

Internet Explorer 8 comes with excess padding at the top and bottom, causing un

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

What events precede and follow a keydown action in a Textarea field?

Guide on automatically removing a DOM element in Jquery after a set amount of time

Using HTML and JavaScript to verify email addresses

Center and justify image inside flexbox using MUI