WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forcing screen reader pronunciation ofabbreviationimportant to a brand

for

From: Bryan Garaventa
Date: Apr 20, 2018 11:51AM

Hi,
As others have already pointed out, I don't recommend this except in some very rare circumstances.

ARIA was mentioned as a fix for this, but the recommended ways of doing this may be problematic across various platforms where support levels differ, so here is one that works more reliably.

The trick here is to use aria-owns to change the accessibility tree without impacting the DOM, like so. This changes "BEG" to "B E G", however it has no impact on the DOM or the styling of the visible text.

<b aria-owns="space1">B</b><b aria-owns="space2">E</b><b>G</b>

Then the following can be appended to the end of the body element so nobody will notice it.

<i><b id="space1">&nbsp;</b><b id="space2">&nbsp;</b></i>

This appends a space character at the end of the B and E letters in the accessibility tree, and this is what causes the separation to occur between them.

A few notes about this: Unlike other ARIA attributes like aria-labelledby or aria-describedby which can reference hidden elements, aria-owns doesn't work like this and won't render hidden elements. Also this technique should never be used on elements that don't support children like IMG elements or input elements, because this forces the accessibility tree to change and any content that is referenced like this will disappear and become impossible to navigate and interact with normally. Also using this method should never be used to move focusable interactive elements around because this does not change the tab order. The use of aria-owns cannot reference the same ID from different attributes, so each referenced node has to be different as shown above.

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com