I tried finding answer but no luck. Solutions provided across web is not satisfactory. Is there any way in Javascript, HTML or CSS to make screen reader to read numbers individually?
It's reading fine if I put a zero before.
<span>Account #: 0123</span> // Reading correct as 'Zero', 'One', 'Two', 'Three'
<span>Account #: 123</span> // Reading wrong as 'One hundred twenty three'
TL;DR: Please don't do anything.
If you absolutely want to force single-digit reading, you may use aria-label on your span, but actually, please don't do it if there is no absolute and unavoidable need to.
The main thing about screen readers is that they convey the same information as your monitor to your eyes. The key notion here is the same, i.e., doing something that would unnecessarily differ from what you see on your monitor is bad in 99.(9)% of cases. I said "unnecessarily" because sometimes it's good to convey additional info: for example, add aria-pressed to a toggle button to mark whether it is pressed or unpressed (which can easily be seen visually with appropriate CSS in place).
If you believe that your digits are too difficult to perceive and need to be separated, first try to separate them with spaces and look whether it's visually appealing or not. My feeling is that you will be somewhat irritated to see Account number: 0 1 2 3 instead of the plain 0123. If it's the case, then believe me, a blind user will be irritated too. If it's OK for you, then go for such a solution, style it appropriately, use non-breaking spaces, but don't do anything special for screen readers in this case.
