htmlinternet-exploreraccessibilityjaws-screen-reader

JAWS in Internet Explorer, not reading heading width tabindex="0"


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>

Solution

  • 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.