Force screen reader to read numbers as individual digits

user_12973644 0
Viewed 1951

I'm using voice over and I'm trying to get it to read numbers as individual digits, for example if I have inputted 2000, voice over will read out "two thousand". I want the desired behaviour to read out "two zero zero zero".

my current input element looks something like this

<input class="some-class" id="some-id" name="some-name"
 type="text">

I have tried setting the type attribute to type="number", type="tel" and adding a style attribute equal to style="speak:spell-out", but non of them worked.

When I separate the numbers with whitespace like value="2 0 0 0" it works, but of course, you can't expect the user to do this.

I understand there may be a way to do this using javascript, but the solution can not contain javascript in the browser due to business requirements.

Any suggestions?

screen-readers accessibility html
2 Answers

You shouldn't try to force a particular pronunciation or digit grouping. Add spaces if grouping has a particular importance or meaning.

Take the base principle that numbers shouldn't be read differently by a screen reader than it is presented. If digits must be separated in a particular way, add spaces, dots, dashes or another separation character. Conversely, if there's no spaces, there's no special need to absolutely read a number digit by digit. That's quite simple.

You shouldn't force the screen reader to read something in the way you view it yourself. Other people may not have the same vision as you. Concerning numbers, some people will prefer to read digit by digit, but others will prefer having them grouped by two, three or four, for their ease of reading, writing and memorizing. Their screen reader is normally configured accordingly.

If a given grouping is important, then groups must be separated with spaces or other characters. If there's no separations, then it implicitly means that grouping has no particular importance.

Note that screen readers always give the possibility to read numbers digit by digit, if the user wish to do so. It is usually not the default. Reading numbers digit by digit is usually done only for very big numbers (billions), or when mixing digits and letters.

Additionally consider that:

  • Different screen reader users have different preferences, and accessibility speaking, it's generally a bad idea to go against preferences or common defaults
  • There are several screen readers, and a lot of different voices in many languages; all potentially behave in slightly different way when reading numbers, and any small change in order to tweak it might create more problems than solve.
  • Screen reader users are used to pronunciation quirks, and they can fix them using personal dictionary
  • Screen readers are nowadays not that bad on deciding whether they need to read numbers at a hole, in groups, or digit by digit.

So, avoid deciding a particular grouping or pronunciation. It's a bad idea, and anyway technically perilous.

user_19712160

I understand there may be a way to do this using javascript, but the solution can not contain javascript in the browser due to business requirements.

You tried HTML and CSS and you can't use Javascript. Screenreaders use the Accessibility tree. They do not use CSS, there's no instruction to tell them to spell the text. They might choose to spell some abbreviations while reading some acronym. This is screenreader choice.

Screenreader users are used to ear numbers as strangely as they come and if they want them to be read char by char they have the appropriate shortcut to willingly spell them.

user_45401410
Related