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?

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

I am facing an issue with jQuery Masonry as it arranges my 'bricks' immediately without waiting for images to load in. Additionally, I need the images to be responsive so I cannot define their height and width like this: <img src="asas" heigh ...

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

I am receiving a JSON object from the server-side, but I have been struggling to save it in LocalStorage. When I check FireBug, this is how it appears: If you are having trouble viewing the images clearly, try opening them in a separate page by right-click ...

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

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

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

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

My goal is to create a feature where users can click on a button within the map and open an external page in Google Maps with specific dimensions (500 X 600) and without the Menu bar, Tool bar, or Status bar. // Custom Button Functionality by salahineo ...

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

I've implemented a basic Bootstrap navbar from the example provided on the Bootstrap website at . However, when I tried to add custom text to the center of the navbar, it caused the "Contact Us" menu item to break onto two lines instead of staying on ...

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

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

Here is my script for a vue component : <template> ... <b-card-group deck v-for="row in formattedClubs"> <b-card v-for="club in row" img-src="http://placehold.it/130?text=No-image" img-alt="Img ...

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

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

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

Chrome DevTools now automatically converts all HEX colors to RGB values, even if the color is set in CSS or using DevTools. Is there a way to prevent this conversion? I know about the method of holding down Shift + clicking the color icon to convert color ...

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

Currently, I am utilizing JSoup for the purpose of web scraping. Within my webpage, there is a table with the classname .chart, containing rows (tr) and data cells (td). However, some of these td elements also include nested tables with additional rows and ...

Mastering the art of CSS float and positioning techniques

Struggling with CSS positioning yet again. I'm trying to design a webpage with one main element in the center, surrounded by 10 others. The challenge is to maintain consistency across different screen sizes (excluding mobile). However, every time I r ...

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

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

I'm having an issue with inserting data into a MySQL database using PHP and an HTML form. After hitting submit, I receive a message stating that the item was inserted successfully. However, when I check phpMyAdmin, the table appears to be empty. The ...

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

Why is IE 8 adding unnecessary padding to a div? I have checked the styling and nothing seems out of place. Can someone assist with this issue? Html The highlighted div in blue is the main concern. .block { clear: both; } .inline { float: lef ...

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

In the process of creating a database-driven graph, I am utilizing libraries from Codepen. These libraries include: THIS and Highchart.js The HTML file on display simply showcases the chart, while the main data processing is handled in an index.js file t ...

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

I need to prevent users from pressing function keys (F1, F2, etc.), the tab key, and any other characters from being added. The code below is supposed to achieve this on my website but it's not working. document.getElementById("code").addEventList ...

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

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

Using HTML and JavaScript to verify email addresses

I have been working on an "Email Validation" code, but it seems to be malfunctioning. I can't figure out why. Would you mind taking a look at it? Thank you. I suspect that the issue lies with this line document.getElementById("custEmail").onchange = ...

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...