CODEWITHSUNDEEP
accessibilityvoiceoveracronymcss
user2700410
user2700410

Reputation: 101

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

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?

Upvotes: 10

Views: 2280

Answers (2)

unobf
unobf

Reputation: 7244

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

Upvotes: 6

QuentinC
QuentinC

Reputation: 14772

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.

Upvotes: 1

Related Questions