WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forcing screen reader pronunciation of abbreviation important to a brand

for

From: glen walker
Date: Apr 13, 2018 10:39AM

You may have limited success specifying an aria-label for a <span>
element. A span doesn't have a role so its accessible name is not normally
computed so the aria-label is often ignored.

Also, when you split up your sentence with a <span>, that causes a "tab
stop" for VoiceOver (at least on iOS). When you swipe right through the
sentence, it'll stop when it hits the <span>. You then have to swipe again
to read the span, then swipe again to read the rest of the sentence.

You can try adding a role="text" to the <p>. That might be considered a
"hack" but it solves both problems on iOS. It reads the aria-label and it
treats the entire sentence as one block instead of splitting it up.

<p role="text">
You have purchased <span aria-label=" N E 1254"> NE1254</span> for $300.
</p>

You'd have to play with JAWS and NVDA to see how well it works there. When
I tried your original example, NE was pronounced as N E instead of
northeast or knee, so I couldn't tell if my solution worked.




On Fri, Apr 13, 2018 at 9:53 AM, JP Jamous < <EMAIL REMOVED> > wrote:

> You can accomplish this by various ways. It depends on the situation you
> have at hand. The bottom line is you use ARIA to hijack the HTML element.
> It may not be the best method from a semantic prospective, but it gets the
> job done.
>
> For example if I have a paragraph:
>
> <p>
> You have purchased NE1254 for $300.
> </p>
> You can hijack NE1254 using ARIA.
>
> <p>
> You have purchased
> <span aria-label=" N E 1254">
> NE1254</span>
> for $300.
> </p>
>
> I hope that helps.
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
>