0

I'm writing some Accessibility code into my application. The problem is that when I have a number (ex: 21) printed in a div for the screenreader to read:

<div id="screenReaderBox" aria-show=true tabindex=0> I have 21 cookies</div>

The Screen Reader reads the div in the following manner: "I have two one cookies" opposed to "I have twenty-one cookies."

How can I modify the div for the screen reader to pick up the html content right way? Would there be any workaround solution?

I have tried parseInt(); same result

Kode_12
  • 4,506
  • 11
  • 47
  • 97
  • 1
    That seems like something the screen reader should do/fix. Is this normal behaviour for all screen readers? – Pekka Apr 18 '16 at 20:20
  • Each screen reader is different in the syntax it's able to pick up. They are generally good at deciphering the HTML content, but I'm not sure if it can read numbers the right way, i'm pretty new to working with screen readers – Kode_12 Apr 18 '16 at 20:32
  • If they can't do this, then they're useless for most content out there on the web - it's hard to imagine that's the state of the art... – Pekka Apr 18 '16 at 20:46
  • 1
    Related/interesting: http://stackoverflow.com/questions/21832888/telephone-numbers-and-screen-readers might be a good duplicate, even. – Pekka Apr 18 '16 at 20:46

1 Answers1

1

You can use aria-label to help the screenreader:

<div id="screenReaderBox" aria-show=true tabindex=0>
       I have <span aria-label="twenty one">21</span> cookies</div>

But you have to note, that if you are using a braille display (or any non text-to-speach assistive technology), this can be counterproductive with big numbers (e.g. 123456789):

I have one hundred twenty-three million four hundred fifty-six thousand seven hundred eighty-nine cookies

In my opinion, your screenreader has a bad implementation of reading numbers (or is some configuration option?) and you should ignore this problem as it does not implement the correct way of interpreting numbers.

Adam
  • 17,838
  • 32
  • 54