Posted on

Spell it out! Determine how Screen Readers should read text

Numbers, abbreviations and equations can pose a challenge for screen reader users. Using the speak-as CSS property, you can determine how text should be read.

Woman Speaking into a Megaphone Photo: © Edmond Dantès / pexels.com

To spell, or not to spell, that is the question

Some days ago, I consulted a client in the banking industry. They want to optimize their web application for screen reader users. One of their questions was: How can we make the screen reader read numbers one at a time? For example, a bank account number with 12 digits or more?

In many cases, screen readers will announce the whole number instead of the single digits. For example, 9100 will be read as “nine thousand one hundred” instead of “nine one zero zero”. Similar problems can arise with abbreviations or equations. It all comes down to the screen reader's inherent heuristics that determine how to read specific letters and punctuation.

Well, wouldn't it be great if we could just tell the screen reader how to read certain content? The answer is: Yes, we can! But browser support is really bad.

The CSS speak-as property

The CSS Speech Module defines the speak-as property. It determines in what manner text gets rendered aurally, based upon a predefined list of possibilities:

  • normal: Uses the browser's language-dependent pronunciation rules (default).
  • spell-out: Instructs the browser to spell the text one letter at a time (useful for acronyms and abbreviations).
  • digits: Speak numbers one digit at a time, like 9100 would be read “nine one zero zero”.
  • literal-punctuation: Spells out punctations (like semicolons, braces, etc.) rather than treating them like pauses.
  • no-punctuation: Entirely skips punctuation.

Using this property, we could define a class for bank account numbers like this:

.bank-account-number { speak-as: digits; }

Browser and Screen Reader Support

This all sounds great in theory. Unfortunately, it won't work with most browsers and screen readers. I put together a demo on Codepen and tested the following scenarios:

  1. NVDA 2021.3.1, Google Chrome 98.0.4758.82, Windows 10
  2. TalkBack, Firefox 97.1.0, Android 12
  3. VoiceOver, Safari 15, iOS 15.1

Out of the three, only VoiceOver does a great job and reads the content according to the speak-as property's value. NVDA and TalkBack completely ignore it.

Considering the fact that the CSS Speech Module was written over 10 years ago, I'm very disappointed by the current situation. I hope that more browsers and screen readers will support the feature in the future!

Posted on