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?

unor
  • 92,415
  • 26
  • 211
  • 360
user2700410
  • 101
  • 3
  • 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 '16 at 13:03

2 Answers2

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

unobf
  • 7,158
  • 1
  • 23
  • 36
  • You opened up a whole world of accessibility awesomeness for me. Thanks! – user2700410 Mar 11 '15 at 01:09
  • 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. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles – Scott Romack Dec 19 '20 at 00:03
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.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
  • 2
    Screen reader behavior can vary. Specifically, VoiceOver does read letters as uppercase if they are transformed with text-transform: uppercase. – jimyi Nov 12 '19 at 18:13