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:
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<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 h1The <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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With