The test

How do screen readers announce common financial terminology, in particular related to payment per month or months. Does adding ARIA or using html text semantic tag such as <abbr> do anything to improve the reading?

Background

Expanding abbreviations is a good usability rule, as evidenced by the fact it is a WCAG 3.2.4 AAA requirement. But any WCAG success criteria designated as AAA is not required for accessibility compliance and is at best a recommendation for good usability. That is not likely to change in the foreseeable future.

Here we test various techniques and how screen readers announce the text. Keep in mind that even if a technique is not supported by a screen reader, it can be beneficial to users who need screen magnification, have cognitive disabilities, or are not native speakers of the language and are not familiar with the more idiosyncratic acronyms.

The basic test

How do screen readers read a / and do they turn "mo" into month or "mos" into "months"?

Results

This is what screen readers read in their default verbosity configuration. NVDA with Firefox is the official accessibility testing platform for desktop, and iOS with Voiceover for mobile.

Using the <abbr> tag

Results

This is waht screen readers read.

Sadly the <abbr> element is completely ignored.

Using aria-label to force screen reader reading.

Now we will try to override the "mo" and "mos" with the words "month" and "months" using aria-label. Support for aria-label on elements that do not have a defined ARIA role, such as text semantic elements, is spotty, do not be too excited.

Results

No difference, the aria-label is ignored.

A total hack (we do not recommend doing this

It is possible to hide what is visually displayed on the screen from screen readers (using the aria-hidden="true" attribute on the element whose contents are to be hidden), and replace it with a visually hidden text (hidden using the CSS clip method) that will be read by screen readers.

  • $300/month
  • $1600/6 months

Results

  • Jaws 16 (with either IE11 or FF-45): "dollar 600 slash month" and "dollar 600 slash 6 months"
  • NVDA (with FF45 or IE11): "dollar 300 slash month" "dollar 1600 slash 6 months"

So we can totally control what screen readers announce by hiding the real content from them and showing them other content instead. We could easily replace the "/" by "every" or "for" by including it in the span above, or putting it in its own span.

This technique is not recommended except when:

  • What is displayed visually cannot be made accessible in any way (such as maps, though that is fortunatley changing).
  • The full equivalent is available to all users in a different form on the screen (such as when user can check a checkbox, or click on an image which automatically checks the same checkbox
  • or not understanding the content presents total user barriers.

People may update the visible content (e.g. change $1600/"6 mos" to $3000/12 mos, but may forget to update the visually hidden text. Screen readerw doul now read "$300/6 months", which is not only wrong, it is extremely upsetting for a customre.

Conclusion

In this scenario it would be beneficial for all users to use the words "month" and months" instead of "mo" and "mos". The second option would be to use the <abbr> tag, because it can benefit users other than screen reader users (e.g. people with cognitive impairments, or people who do not speak English as a first language). But the current set-up (see example 1) does not constitute an accessibility defect, and is communicated well enough by screen readers.

Note

Voiceover results to be added.