Search code examples
htmlaccessibilitywai-ariajaws-screen-reader

JAWS Reads seperate divs together, how to prevent this?

I am testing out a web application and notice something very strange.

Say I have a parent div with a tabindex="0" so the user can focus it via keyboard.

<div tabindex="0">
  <div>
    <span>34</span>
  </div>
  <div>
    <span>43</span>
  </div>
</div>

If I have the above layout, it will read "Three thousand four hundred forty three" rather than "Thirty Four" "Fourty Three". Is there anything I can do here to prevent the merging of these numbers? I'm shocked that it's doing this in the first place considering they are in separate inner divs AND spans.

Solution

  • Putting a &nbsp; between the two spans is a viable solution to this.