Can you force a screen reader to read numbers as individual digits?

Question

Phone numbers are typically all digits, ignoring parens, dashes, pluses, etc., so input fields for phone numbers are typically numeric.

When a screen reader encounters a numeric input field, it'll read the value as a whole number. For example, if I had three input fields for a US phone number, with the first being the area code (3 digits), then the exchange (3 digits), then the line (4 digits), if the fields have 123, 456, 7890 (respectively), the way we'd normally say that number is "one two three", "four five six", "seven, eight, nine, zero".

But when a screen reader encounters those fields, it says "one hundred twenty-three", "four hundred fifty-six", "seven thousand eight hundred ninety".

I think screen reader users are used to hearing phone numbers as big numbers (at least the guys I've talked to expect that), but that doesn't mean we can't make it better. If I were to ask one of these guys for their phone number, they wouldn't use big numbers but rather individual digits.

I tried various <input> types and looked through all the roles, states, and properties but don't see anything built in that can force digits to be read.

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

Is there a better way?

Answer 1

With limited browser support, you can try CSS3 property:

speak:spell-out;

Best way is to use aria-label to give a convenient reading format with the sufficient pause:

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

You can also use a hCard microformat which can be interpreted by some technologies and use a phone number in international format (which can be used by other) combined 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

Answer 2

I think your base-line responsibility is to display the phone number in a normal way for your locale (i.e. Displaying a US phone number would be different from a UK number.)

Being consistent with how other sites do it (even if sub-optimal) will create the least effort for screenreader users. It is a bit like those input which auto-tab you to the next field. Great idea, but people are used to the sub-optimal method so press tab anyway.

You don't want to get in the way of copy-paste or other basic things, but as an enhancement, you could used aria-label like in this answer: ARIA attributes for reading alternative text (e.g. Roman Numerals) in HTML

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

However, that is quite hacky and annoying to put in, I would consider that more than is needed as the screen reader should do a better job.