Apple VoiceOver reading words as acronyms. Can this be controlled?

Question

We have an issue where the Apple VoiceOver screen reader is reading words as acronyms. Here's an example:

"NEW & USED" will read as "N-E-W and Used"

We have honed in on the issue a bit and are seeing that words which are 3 characters or less and uppercase get read as acronyms.

The text is uppercase via CSS text-transform: uppercase;.

Has anyone found a way to control VoiceOver to and make it read the words?

Turfman

Does this mean that words over 3 letters are safe? I am wondering as I have to use uppercase for our product name (very annoying) and it is 7 characters long. – Russon

Answer 1

You could markup those words in this way

<span aria-label="new &amp; used">NEW &amp; USED</span>

UPDATE: using aria-label on a <span> no longer works

Commence

You opened up a whole world of accessibility awesomeness for me. Thanks! – Turfman

It is recommended to use HTML elements that will be read instead of generic containers like span but if you can't you should use an aria role. developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles – Oona

Answer 2

If you are using text-transform: uppercase, then, as far as I know, you don't need to effectively write your text completely with capitals to make it show correctly.

The fact that NEW is written completely in uppercase is the root of the problem. Most screen readers effectively pronounce full caplitalized words as if they were acronyms, especially if the word is short (2-6 characters) and/or if it contains few or no vowels. This is the typical characteristics of acronyms.

IF you have no choice to write NEW in capitals, use <span role="text" aria-label="new">NEW</span>, but I would recommand trying to change the text first. ARIA should only be used if it's really necessary, if there isn't any other good and simple solution.

Thalassa

Screen reader behavior can vary. Specifically, VoiceOver does read letters as uppercase if they are transformed with text-transform: uppercase. – Circumstantial