I am working on widget which shows description text on hovering the card, in order to make it accessible the description text also opens when the heading has tab focus, therefore I have added tabindex="0" to the headings,
The issue I am facing is in Internet Explorer and JAWS screen reader, the heading is not read out when the tab focus goes to the heading text.
I have tried adding aria-label and role="document" still facing the same issue.
Also went through this DIV ARIA-LABEl not being read by JAWS , the solution related to applying the aria-label to the span is not working,
and the point related to adding a screen reader only text ( with sr-only class ) will cause double text issue in other screen readers such as NVDA and Iphone.
Following is how the DOM structure looks :
<div class="card contaienr">
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
<div class="card">
<div class="content">
<h3 tabindex="0" aria-level="3" role="heading">
<span>
Heading Text 1
</span>
</h3>
<div>
<span>
Description text
</span>
</div>
</div>
</div>
</div>
In my case, List Item role at the card tag was causing the issue, if we remove the role from there this issue was resolved.