Get screen readers to pronounce well-known acronyms

user_9511844 0
Viewed 75

How do you get a screen reader to properly read something like:

<nav>
  <a href="/">Home</a>
  <a href="/faq">FAQ</a>
  <a href="/contact">Contact</a>
</nav>

(I.e. read it as "F A Q" instead of "faq").

It doesn't make sense to use <abbr> here since "FAQ" is well-known.

I've tried:

  1. speak-as: spell-out; CSS property, but apparently it's not well supported by screen readers and seemingly has about 3.5% global browser support anyway
  2. <a href="/faq" aria-label="F.A.Q.">FAQ</a> which works on my screen reader (Orca). However, I'm worried some will read out the bullet points, and I believe aria-label is meant for interactive elements so I'm not sure it's a good solution for things like <h1>FAQs</h1>. In fact I think many will ignore the label entirely for an h1

The <h1>FAQs</h1> issue raises further concerns about reading that out properly (i.e. the addition of the "s").

Is there a better solution to this?

wai-aria accessibility
1 Answers

IF you want to do something, the only really good answer is <abbr>. As you have said, though, FAQ is a well known acronym, and as such, you don't need to expand it explicitly.

If you don't want to use <abbr>, or as in the present case, juge that it's unneeded because the abbreviation is so common, in fact, don't do anything else.

You may use aria-label on a link, or visually hidden / off screen text, but in fact it's bad ideas, because you are probably going to create more problems than to solve.

<abbr> is good because you can decide, in screen reader options, whether abbreviations have to be expanded or not. For the rest, most screen readers come with a pronounciation dictionary, normally customizable by the user. If they don't understand the word "FAQ" pronounced as such, they can add it in their dictionary to make it pronounced as "Frequently asked questions" or "F, A, Q", depending on their own preferences. If you interfere in there and force the pronounciation to something the user doesn't know, he/she will maybe not understand what it is; and hance you have made experience worse.

user_19712160
Related