10

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?

1
  • 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.
    – R Reveley
    Oct 31, 2016 at 13:03

2 Answers 2

6

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

2
1

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.

1
  • 2
    Screen reader behavior can vary. Specifically, VoiceOver does read letters as uppercase if they are transformed with text-transform: uppercase.
    – jimyi
    Nov 12, 2019 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.