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
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of JR
> Accessibility
> Sent: Friday, April 13, 2018 8:55 AM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Forcing screen reader pronunciation of abbreviation
> important to a brand
>
> Is it possible to force a screen reader to pronounce a two-letter
> abbreviation a certain way, rather than the way the screen reader software
> wants to pronounce it?
>
> In a previous WebAIM discussion from 2014, Geri Druckman suggested using
> the HTML <abbr> tag, but I cannot get that to work.
> https://webaim.org/discussion/mail_thread?threadb65
>
>
> For the sake of example suppose my company's name is Nova-Echo but we go
> by NE (which should be pronounced 'N E') in our product numbers and in our
> preferred customer program, MyNE (which should be pronounced 'My N E').
>
> The default pronunciation of the letters 'N' and 'E' next to each other in
> NVDA is 'northeast' and in JAWS it is 'knee'. This leads to undesirable
> pronunciations of our product numbers, such as 'northeast 1234' or 'knee
> 1234', and of our preferred customer program 'my northeast' or 'my knee'.
>
> How can we force the screen readers to pronounce these items the way we
> want them to?
>
>
> I have placed some sample HTML on my Google Drive, that contains additional
> examples:
> https://drive.google.com/file/d/1SiAN6ewa70q9L_SqmcxIwIuYQv_
> mEKRr/view?usp=sharing
>
> Also a spreadsheet with the pronunciations I observed in NVDA and JAWS:
> https://drive.google.com/open?idC3RhocHOdtuGJ0uopLfQtGA4EF3p
> WEusM_ANYQB9Kc
>
> Thank you very much.
> > > at http://webaim.org/discussion/archives
> >
> > > > >