How can I get Mac Voiceover to read numbers as numbers instead of individual digits?

Question

When I render a number in a span tag, Mac Voiceover is reading individual digits instead of numbers. For example, 10 is read as "one zero" instead of "ten".

How can I make it read "ten" instead of "one zero"?

I have searched for answers, but it seems most people have the opposite problem. CSS properties like speak and speak-as seem to have no effect.

If you'd like to see an example, try loading up the following pen and having Mac Voiceover read it (to use Mac Voiceover, use Command + f5).

https://codepen.io/davescode/full/GeGLYv

Or literally just: <span>10</span>

Answer 1

Ensure that your VoiceOver settings are set to read numbers as words:

Whenever I access the codepen from your question using these settings in Safari, the number is read as the word "ten", instead of the digits, "one zero".