Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get screen readers to pronounce well-known acronyms

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?

like image 439
J P Avatar asked Dec 11 '25 05:12

J P


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, judge 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 pronunciation 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 pronunciation to something the user doesn't know, they will maybe not understand what it is; and hence you have made experience worse.

like image 138
QuentinC Avatar answered Dec 13 '25 17:12

QuentinC