NVDA reading modal items multiple times
Hey everyone. I have been working a modal mobile menu and trying to use NVDA to make sure it's accessible for screen readers but whenever I go to open the modal I get some really strange behaviour where it reads everything within the modal multiple times (see the log below). I have tried assigning custom aria-labels to things but nothing really seems to be working. Anyone else run into these issues? It also happens on both Chrome and Firefox
here is a link to the repo if anyone wants to try it : https://github.com/Chris-Wagg-Frontend-Mentor-Projects/news-homepage
GitHub
GitHub - Chris-Wagg-Frontend-Mentor-Projects/news-homepage
Contribute to Chris-Wagg-Frontend-Mentor-Projects/news-homepage development by creating an account on GitHub.
4 Replies
Hmm, trying to figure out what might be the cause there, it's definely stange.
One thing quickly, you're open and close buttons are only announced as
button. There's no context to them for a screen reader. You'll either want to put text inside of it and hide it with a .visually-hidden class, or you could add an aria-label to the button, something like "open navigation menu" and "close navigation menu"
Also, you have the desktop version as a nav, but not the mobile version... any reason that one isn't a nav?
And actually, wrapping them in a <nav> does fix the issue...
it also announces it as a navigation, which is good, then reads out each link one timethis does seem to be a long standing issue with ndva with dialogs? https://github.com/nvaccess/nvda/issues/8971
GitHub
NVDA repeats dialog content twice in Browsers · Issue #8971 · nvacc...
Steps to reproduce: Go to http://www.3needs.org/en/testing/code/role-dialog-code.html. This site is provided in test results of official W3C wiki (https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Dd...
So turns out that if you don't wrap the inline elements (links) with something like a paragraph or make it into a list, then NVDA will first read the dialog as pure text and then read it another time as the semantic html, hence the double reading. There are still issues with buttons being read twice despite having aria-labels, which hopefully I'll have a fix for soon. Hopefully this helps if anyone else encounters this issue
Thanks for following up on this! Interesting that it reads it twice, I wonder what the reasoning/cause for that is