CODEWITHSUNDEEP
user-interfaceaccessibilityscreen-readers
Henry
Henry

Reputation: 145

Screen reader is not reading text inside div tag. (After div tag being focused)

I have question regarding screen reader. I have div tag that will get focus on button click. I am expecting screen reader to read automatically each and every words in that div tag once div tag get focus. Some how screen reader is not reading any thing on focus. If I will do the reverse tab meaning that on that page there are couple of more div tags. So if I will come on that div tag after reverse tab (Shift + tab) then screen reader will read every thing. Any comments for this missing words ??

This is my HTML code for that page. From previous page button click I will redirect tho this page and "information" div will get focus. So I am expecting screen reader to read everything when this div tag get focused but it is not reading. If I will tab again and go to back button again then if I will come to "information" div tag after do the reverse tabbing then screen reader will read everything automatically.

<body>
<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span id="label">Where isRecord Number ?</span><br>
<span id="text1">You'll find this number on a card.It's the number used when making appointments.</span><br>
<span id="text2">If you are in America don't include when entering the number.</span><br></div>

<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>
</body>

Upvotes: 2

Views: 6206

Answers (1)

slugolicious
slugolicious

Reputation: 17435

You are putting a hard break at the end of every sentence (<br>) so that causes the screen reader to pause as if you had a new paragraph.

You can get the same visual styling (one sentence on each line) if you use a style for your <span> instead of <br>.

To fix your example, remove the <br> at the end of the line and put a class= on each span and use display:block for your span. Something like this:

<style>
   span.myspan {display:block}
</style>

<div id="dialog" class="dialog" style="">
<div id="information" tabindex="0">
<span class='myspan' id="label">Where isRecord Number ?</span>
<span class='myspan' id="text1">You'll find this number on a card.It's the number used when making appointments.</span>
<span class='myspan' id="text2">If you are in America don't include when entering the number.</span><br></div>

<div><button class="button i18n" id="back_button" role="button"><b>BACK</b>
</button></div>
</div>

Upvotes: -1

Related Questions