NVDA doesn't see buttons inside a popup
I have a part of UI (shown in the screen below) that consists of this user icon and some additional options inside a popup below. The popup isn't visible all the time, it only shows when you click the user icon.
Since I've been writing this app in Vue, the popup's appearence is controlled by the
v-if directive. Since it seems to matter, I'll explain briefly how v-if and v-show work in Vue, for those who don't know Vue:
* v-if removes the element from the DOM (when a given condition isn't met)
* v-show only adds/removes display: none; to the element
And my problem is that in chromium-based browsers (tested on Brave, Chrome and Edge) the behavior of NVDA is a bit weird, when showing this popup:
* when pressing Tab, the focus is shifted onto the first button, but NVDA reads this area as "blank" - same for the other button
* when pressing ArrowDown, NVDA ignores this popup completely and moves to another part of the UI
* after tabbing through both buttons, up/down arrows begin to work and what NVDA reads is correct
When noticing the latter behavior, I started to think that maybe it's v-if that's causing this issue and I removed it temporarly. After doing that, my popup was all the time on the screen but NVDA behaved correctly.
Then, I tried to replace v-if with v-show (only to see what would happen, in fact, I need for it to be v-if, not v-show) and the behavior was exactly the same as for v-if, meaning NVDA completely ignored my popup.
What's more, I observe this weird behavior only in the browsers mentioned above. In Firefox, it works perfectly fine. I don't have any Apple device to test it on Safari.
I also checked it with this accessibility simulator: https://chrome.google.com/webstore/detail/silktide-website-accessib/okcpiimdfkpkjcbihbmhppldhiebhhaf that I have installed on Brave and use sometimes for testing and it also works perfectly fine (on Brave).Silktide - website accessibility simulator
A browser plugin that helps you develop accessible websites by simulating a range of experiences.
3 Replies
Since I'm very beginner to accessibility, I have no idea what's going on and how I can fix it. I spent around 2 hours googling for it and I found similar github issues as well as stackoverflow posts but I haven't found any solution.
People writing those posts seem to use many different aria-attributes but I didn't test most of them because, to me, using as many aria-attributes as you're able to come up with doesn't necessarly improve the user experience, so I try as little of them as I possibly can. But, obviously, I wouldn't know any better, so I may be wrong on this one.
Nevertheless, if it matters, I don't have any aria-attributes on this popup and only
aria-label and aria-controls on this user-button.
I could probably work around this by making this whole popup focusable and add an aria-label to it that would explain to a user that they should use Tab on this one, not the arrow keys, but I can see so many disadvantages of this approach...
So, I thought, maybe there is someone here who faced a similar issue and know (or at least have an idea) what may be a source of my problem and could help me? Maybe should I in fact add an aria-attribute that I don't know about?
But it works on Firefox and with this Silktide thing without additional aria-attributes...
Nevertheless, I thought it wouldn't hurt to ask and in worst case scenario I can just go with the previously mentioned workaround.Have you got any code to present? It will help others debug the situation.
As it could be anything from element types, your JS implementation or even CSS
Well, I actually thought this is some kind of an NVDA bug or that maybe browsers handle those
v-if and v-show directives differently (my knowledge on how Vue works under the hood should be certainly improved). Therefore, I thought my code wouldn't be relevant.
But, if you think, this may be due to CSS or JS, then here is my most up-to-date code: https://github.com/Kepmon/task-manager/tree/tas-281-improve-accessibilityGitHub
GitHub - Kepmon/task-manager at tas-281-improve-accessibility
Contribute to Kepmon/task-manager development by creating an account on GitHub.