I am trying to make the collapsed state both accessible in NVDA and JAWS but it seems its not working properly in JAWS. Any idea how to fix this?
I provided the images for the code and the link list below.
OUTPUT: You could see in the image below that in only shows that collapsed state in NVDA and not in JAWS.
Code:
As long as you use aria-expanded and toggle its state between true and false, you are good with all screen readers. The change in state will be announced by both JAWS and NVDA.
What you are asking about is how a screen reader displays a list of elements on the page. Different screen readers show things differently and have various levels of support of listing html elements. In particular, you are looking at all the <a> elements on the page. This is done with INS+F7 with both JAWS and NVDA. JAWS will only show the links in that dialog whereas NVDA gives you the options of showing links, headings, form fields, buttons, and landmarks, as shown in both of your screenshots.
Both JAWS and NVDA show the text associated with the link. NVDA also chooses to display the expanded/collapsed state of the link but that's just a choice the NVDA developers made. They also show if the link is visited. Just because the state is not displayed in that dialog does not mean it isn't being honored.
Consider the following:
<a href="." aria-expanded="true">foo</a>
<a href="." aria-expanded="false">bar</a>
The links dialog for JAWS and NVDA are the following, JAWS first:
The NVDA dialog shows the expanded state but that's not required.
If you navigate to both links, here is what both JAWS and NVDA say, JAWS first:
Notice both screen readers say "expanded" for the first link and "collapsed" for the second link. That's the critical part to ensure that it works.