Ever wondered when testing with a screen-reader how you can get it to read out a number as individual digits instead of a single number (often including the word “million”)? The general advice would be not to be too worried about that as screen-reader users do have some control over this themselves in their settings, and can also read words character-by-character if needed. But it is something which is in the CSS spec, but up to now has been unsupported.
However Voiceover and Safari have now finally implemented some speak-as css support.
This property can alter how screen-readers process content which could potentially be really useful but also possibly dangerous and unwelcome for screen-reader users.
Whilst this is a step-forward in support, Voiceover does however do some weird stuff when you use it on an inline element - for example making the parent element use the same setting, which can be especially problematic when using spell-out.
Unfortunately NVDA and JAWS are yet to do so anything with it at all.
There are other properties in the spec such as voice-volume: loud and rest-before, but the speak-as properties look to be the most useful in that balance of helping authors get meaning across without negative impact on screen-reader users.
Examples
Try out the examples below with your screen-reader to see how the different attributes work.
The following all work in Voiceover with Safari.
They do not currently (March 2020) work with JAWS or NVDA on any browser.
Speak as digits
Numbers only
The following number will be read out as normal
1005600
<p>1005600</p>
The following number is using the digits value.
1005600
<p style="speak-as: digits">1005600</p>
Mixed alpha-numeric
The following number will be read out as normal
10DIG05600L
<p>10DIG05600L</p>
The following number is using the digits value.
10DIG05600L
<p style="speak-as: digits">10DIG05600L</p>
Using speak-as:digits on inline elements
Using speak as digits on an inline element currently makes it's parent speak as digits also. In the following phrase only the second number should be spoken as digits.
This is a number 90909 and so is 1005600
<p>This is a number 90909 and so is <span style="speak-as: digits">1005600</span></p>
Spell out
The following phrase will be read out as normal
Melbourne is a city in Australia
<p>Melbourne is a city in Australia</p>
The following phrase will be instructed to be spelled out
Melbourne is a city in Australia
<p style="speak-as: spell-out">Melbourne is a city in Australia</p>
The following reference will be instructed to be spelled out
10DIG05600L
<p style="speak-as: spell-out">10DIG05600L</p>
Note, using spell-out on an inline element currently makes it's parent spell out also. In the following phrase only Australia should be spelled out.
Melbourne is a city in Australia
<p>Melbourne is a city in <span style="speak-as: spell-out">Australia</span></p>
Punctuation examples
The following phrase will be read out as normal
Melbourne is a city in Australia. It has a population of approx. 6 million people.
<p>Melbourne is a city in Australia. It has a population of approx. 6 million people.</p>
The following phrase will be instructed to be read out with punctuation
Melbourne is a city in Australia. It has a population of approx. 6 million people.
<p style="speak-as: literal-punctuation">Melbourne is a city in Australia. It has a population of approx. 6 million people.</p>
The following phrase will be instructed to be read out without punctuation
Melbourne is a city in Australia. It has a population of approx. 6 million people.
<p style="speak-as: no-punctuation">Melbourne is a city in Australia. It has a population of approx. 6 million people.</p>