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

Strong tags are not functioning properly within paragraph tags in Firefox

Issue with Navigation Scrolling Feature on Wordpress

Pressing Ctrl + S enables you to preserve the webpage for future

What is the best way to place an "Add row" button directly in front of every horizontal row border within a table?

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

Utilizing PHP variables and CSS to dynamically adjust the background color according to various events triggered by SQL data

Storing the closed state of a pop-up box in localStorage for future reference

Issues with a top navigation bar

How to assign attributes to multiple menu items in WordPress without using JavaScript

Stable Banner with Automatic Scroll to Sections

Issues with Vue enter transitions not functioning as expected

Div blur event for editing content

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

Is it possible to merge two HTML selectors using jQuery?

Having trouble accessing DOM elements in Durandal

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

How can jQuery be used to display the size and type of linked files in title attributes?

Other elements are unable to conceal Material UI InputBase

Next.js experiencing issues with applying styles from .modules.scss files

Exploring the differences between two CSS style attributes using JQuery