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">+123 456 7890</span>
</p>

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