1

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>
Devank Nassa
  • 11
  • 3
  • Have you tried using the `Tab` key to go to the focusable element. Or use other navigation shortcuts, depending on the navigation mode used (browse or focus mode). – Xudong Peng Jul 26 '21 at 08:57
  • I just copied your code to an html file, opened it in IE and ran JAWS and when I tabbed to the headings, I heard: "Heading Text 1, heading level 3". That's exactly what I expect. What are you hearing? Note that you have extra code that's not needed. You have an

    so you don't need aria-level=3 nor role=heading.

     – slugolicious Jul 29 '21 at 00:47
  • @XudongPeng, yes i am using the Tab key to go to the focusable element, using arrow key it is reading it out fine, but the expand card funcitonality is workig using the Tab key only, – Devank Nassa Aug 03 '21 at 14:21
  • @slugolicious Yes the the example code is working as expected, I am not sure why, it is not working on the widget, Ill make the code as close I can to the real widget and get back to you. ( i got your point regarding the redundancy of the role and aria-level ) – Devank Nassa Aug 03 '21 at 14:22

1 Answers1

0

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.

Devank Nassa
  • 11
  • 3
  • Your example code didn't have any list information or roles. If you want good advice from stackoverflow, you'll need to post code that is exactly causing the problem. As noted in my previous comment on the OP, copying/pasting the code into IE worked just fine with JAWS so there was some other code not shown in your OP that was causing the problem. There are a lot of smart volunteers that post answers on stackoverflow so please give sufficient and accurate information when you post a question. – slugolicious Mar 01 '22 at 19:47
  • @slugolicious , I am new to stack overflow, this is my first question, for the future I will keep in mind your input, for this particular question what should I do ? Delete it or Edit the question in the OP. – Devank Nassa Mar 08 '22 at 12:26
  • Edit the original question and also post updated code that caused the problem. A list role shouldn’t prevent tabbing or text from being read. – slugolicious Mar 08 '22 at 18:55