processing
Fixed the skipping of download links by screen reader
Fixes #1015
Changes:
I think aria-labelledby is supported for interactive content elements such as links and buttons by a screen reader but skipped for static elements. So, I removed the aria-labelledby attribute from the unordered lists which makes the screen reader works fine now.
Screenshots of the change:
NA
I think the issue actually might be that the lists have css property list-style: none which also hides it from screen readers. so what we actually need here is roles set: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role
@lmccart Thanks. Although lists have a role="list" by default still I tried adding role="list" to the ul and role="listitem" to li but the screen reader skipped it.
@Rahulm2310 ah ok. I'm good to merge your fix then, but are you able to provide any link that explains what's happening and how this fixes it? I just want to understand better. And to confirm, though you're removing the aria-labeledby tags, the headings are still staying attached to the lists from the screen reader perspective?
@lmccart removing the aria-labeledby tag is a work around but not a solution.
I think the issue actually might be that the lists have css property list-style: none which also hides it from screen readers.
Not sure if this is related to list-style:none as bottom list is also skipped by screen reader.
.
You can try running the chrome screen reader to know the actual problem. You can also try removing the aria-labelledby tag from developer tools and try running the screen reader again to see if the problem is fixed or not. 🙂
@Rahulm2310 yes this was my understanding as well. That's why I thought adding the role="list" should address the issue, see references: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
are you able to provide any link that explains what's happening
What's happening
Suppose this list :
Now when screen reader reads it, it just announces "Top Cakes, list with three items". It doesn't announces the list items Red Valvet, Coconut, Angel Food. But when I remove the aria-labelledby attribute from the ul then the list items are also announced by the screen reader.
Thank you. I was asking for a link that explains why using aria-labeledby prevents reading of lists.