Telephone numbers and screen readers

Question

Is there a standard way to make screen readers spell out numbers?

I am currently using NVDA and Firefox and have the following telephone number

<p>01234 567890</p>

This is read as

Zero one two three four five hundred and sixty seven thousand eight hundred and ninety

This is quite confusing to the listener. I would like some way of specifying that the screen reader should spell out the number like

Zero one two three four five six seven eight nine zero

Answer 1

Maybe the speak-numeral property in you stylesheet?

The speak-numeral property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

• for blind people
• in the car
• help users learning to read

The speak-numeral property specifies how numerals will be spoken.

Source: http://www.w3schools.com/xslfo/prop_speak-numeral.asp

Also, I found this post helpful: http://www.nicksmith.co.uk/blog/2007/11/09/does-your-screen-reader-read-phone-numbers-properly/

I then came up with the following idea:

0<span>7000</span> 1<span>2</span>1 0<span>2</span>2

In VoiceOver this reads “zero, seven thousand, one, two, one zero, two, two”. Notice I kept the ’7000′ as one number; to me “seven thousand” is more memorable than “seven zero zero zero”.

and further

My research into aural CSS properties found that the property I’d need is already there – ‘speak-numeral: digits;’

Answer 2

I don’t know if (or which) screen readers support these, but (in an ideal world) they should.

CSS: Aural

• CSS 2.1: speak-numeral: digits;

Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven".

• CSS Speech Module (CR): speak-as: digits;

Speak numbers one digit at a time, for instance, "twelve" would be spoken as "one two", and "31" as "three one".

HTML: tel URI

RFC 3996: The tel URI for Telephone Numbers

So instead of

<p>01234 567890</p>

you would have something like

<a href="tel:01234-567890">01234 567890</a>

HTML: Vocabularies

• FOAF: phone property
• Schema.org: telephone property
• Microformats: tel class (hCard)

Answer 3

I think the best thing is to write the number this way, it's semantically correct and (breaks the Brail users experience see @slugolicious comment) makes the screen reader announce phone number by it's digits

<a 
    href="tel:01234567890" 
    aria-label="0 1 2 3 4 5 6 7 8 9 0"
>
    01234 567890
</a>

if you are using Twig as a template engine, you could do it this way

<a 
    href="tel:01234567890" 
    aria-label="{{ "01234567890"|split('')|join(' ') }}"
>
    01234 567890
</a>

Credits: https://jhalabi.com/blog/accessibility-phone-number-formatting

Answer 4

you can use a character split

int[] numbers;
for(int i = 0; i<string.length; i++) {
   numbers.add(string[i]);
}

note code is not tested since i dont know what language you are using java, c#, perl