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

accessibility, acronym, css, voiceover

Solution

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

Problem

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?

Original source