How do screen readers read <abbr> tags?

Question

I learned that the <abbr> tag is supposed to be interpreted by screen readers in a way that its title attribute would replace its content when read by a screen reader. However, when I try that, neither MacOS (Firefox and Safari) Voiceover nor NVDA (Windows 10, Edge and Firefox) work that way. Here's the relevant code part:

... bla bla bla <abbr title="nervus">N.</abbr> peronaeus ...

(that's a medical expression)

IMO this should be read as "... bla bla bla nervus peronaeus ...", but it's read as "... bla bla bla N.", then a long silence (or the screen reader even stops before it), apparently because of the dot, and then "peronaeus ..." - no "nervus"...

Am I using the syntax correctly or is there something which I am missing? Or, if that's correct: Is there any WAI-ARIA code or similar which I could add to make it work the way it's suppposed to be on most screen readers?

Answer 1

You can't really depend on the user hearing the title attribute of the element. Here's a good resource on how screen readers process HTML elements, and for abbr, the entry is as follows:

As you can see, screen readers usually just read out the element content. Since N. contains a period, it just reads out "N", then does a full stop for the period. You can set up the screen reader to read the title content, but it's an opt-in setting, so you shouldn't depend on it. There's really no way to set content for a screen reader with title.

Answer 2

The abbr tag is just misleading.

In your case, you do not want to give information to blind users only but to people ignoring what appears to be a common medical abbreviated term. A non blind user, not using a screenreader, needs this information.

On the contrary, blind people using braille displays do enjoy abbreviations. A lot.

---

If you want a very effective way to handle abbreviation, use a glossary :

 <a href="/glossary/nervus-peronaeus"
        aria-label="Nervus peronaeus"
        title="Nervus peronaeus" class="glossary">N. Peronaeus</a>

The aria-label has very good support on links, and the title attribute may be used to give a hint to non-screenreader users.

The glossary may be inserted inside the page in the bottom for instance.

 <a href="#nervus-peronaeus"
        aria-label="Nervus peronaeus"
        title="Nervus peronaeus" class="glossary">N. Peronaeus</a>

My preferred way to handle abbreviations is not using them.

Nervus Peronaeus

Clear. Concise. That seems maybe trivial but when you think an abbreviation deserves an explanation, that's the best way for everyone (motor, visual, cognitive disabilities).

Of course, for abbreviations part of the language you do not need to explain them (FBI, NATO, ...). In a medical website for professionals only the "N. peronaeus" term maybe part of the language for the targeted public.