Can you make the screen reader read numbers as single digits?

Question

Phone numbers are usually all numbers that ignore parsers, dashes, pluses, etc., so the input fields for phone numbers are usually numeric.

When a screen reader encounters a numerical input field, it will read the value as an integer. For example, if I had three input fields for an American phone number, the first of which was an area code (3 digits), then an exchange (3 digits), then a string (4 digits), if the fields have 123, 456, 7890 (respectively) as we usually say, the numbers are "one two three," "four five six," "seven, eight, nine, zero."

But when the screen reader encounters these fields, he says “one hundred twenty three,” “four hundred and fifty six,” “seven thousand eight hundred and ninety.”

I think that users on the screen of readers are used to hearing phone numbers as large numbers (at least the guys I spoke to expect this), but this does not mean that we can not do it better. If I asked one of these guys for their phone number, they would not use large numbers, but separate numbers.

I tried various input> types and looked through all the roles, states and properties, but did not see anything that could make the numbers read.

All I can think of is to encode around it, having a visually hidden <span> that contains a number as separate digits, <span id = 'foo'> 1 2 3 </span>, then having <aria- input labelledby = 'foo'>.

Is there a better way?

Answer 1

I think your basic responsibility is to display the phone number in the usual way for your locale (i.e. displaying the phone number in the USA will be different from the number in the UK).

Being in accordance with the way other sites do it (even if they are not optimal) will create the least effort for users working with scrolling. This is a bit like the input that automatically takes you to the next field. Great idea, but people are used to the suboptimal method, so click the tab anyway.

You do not want to interfere with copying or other basic things, but as an improvement you could use aria-label, as in this answer: ARIA attributes for reading alternative text (e.g. Roman Numerals) in HTML

eg. <span aria-label="One, Two, Three"><span aria-hidden="true">123</span></span>

However, it is rather negligent and annoying to insert it, I would think that more than necessary, since the screen reader should do a better job.

Answer 2

With limited browser support, you can try the CSS3 property:

 speak:spell-out; 

The best way is to use aria-label to give a convenient reading format with enough pause:

 <span aria-label="1 2 3. 4 5 6. 7 8 9 0">123 456 7890</span> 

You can also use hCard microformat , which can be interpreted using some technologies and use a phone number in an international format (which can be used by others) in combination with the previous method

 <p class="h-card"> <span class="p-tel" aria-label="1 2 3. 4 5 6. 7 8 9 0">[phone]</span> </p> 

TL DR: use international format, aria-label , hCard microformat and speak:spell-out CSS property