-
Posts
-
One of my bigger clients paid for an accessibility review and one of the issues they listed is “Mobile menu does not contain the input focus” — in other words, the focus does not stay “trapped” in the mobile menu until the menu is closed — they want us to make sure the focus remains within the menu until the user takes an action to clear the menu. Do you happen to have any solution for that — a way to trap the focus in the mobile menu until it’s closed? I’m using the Sidebar Flyout Menu (Classic). I don’t know if that’s the same as a modal window — if so maybe this code would work? https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
Thanks and let me know if you have any questions.Hey sky19er,
Thank you for your patience, I tried testing the mobile menu with the [Tab] key on our 2017 Demo with the dev tools at 768px. My understanding of the spec is that you should be able to [Tab] into the mobile menu and stay there until a link is [clicked] with the [enter] key. This worked correctly for me, please give this a try.
So I don’t see that the linked solution is needed on our demo site, but if there is a conflict on your customer site preventing the default action then perhaps this would help, a quick look at the script seems that the fourth line is the target ID
const modal = document.querySelector('#exampleModal'); // select the modal by it's id
the ID of the mobile menu isav-burger-menu-ulso without testing this may be the solution.
But I would recommend comparing your customer’s site with the demo to determine why they are not performing the same.Best regards,
MikeThanks, but the issue is that, if you tab all the way through the mobile menu — without making a selection — the focus jumps out of the mobile menu and back into the site/page behind the mobile menu. So then the user is left with the mobile menu still open, but the focus is not longer in the mobile menu. You can see this issue if you tab past the end of the 2017 demo menu, too. The accessibility firm says we have to “trap” the focus in the menu until the user either makes a selection or closes the menu. In other words, if the user tabs to the end of the menu, the focus should jump to the close button for the mobile menu and then back to the start of the mobile menu. Does that make sense now?
Hi,
Thanks for the feedback and your patience, your explanation helped and I tried to modify the script you linked to be I was not fully successful and also felt the Dev Team should be brought into this, so I submitted this to them and will reply back when I hear from them. We are a world wide organization, so while you linked to info about being ADA compliant we will probably want to go with something broader like WCAG, I didn’t find a “trapped” spec in either and wonder if having the menu close once the user tabs out of the menu would also satisfy, can you link to the ADA spec that your accessibility review company is pointing to and if they also have a matching WCAG spec? Thank you.Best regards,
MikeHey Mike, thanks so much for looking into this and sharing with the dev team!! The accessibility review doesn’t seem to reference specific guidelines for this issue — I can ask them about that; I think we’re setting up another review with them within a couple of weeks. I would guess having the menu close once the user tabs out of it would be a significant improvement, at least., but I’ll definitely let you know what they say when I find out. FYI, this is the accessibility firm my client’s using, and you can see their mobile menu works in the way they describe — maybe that could provide a clue re how to program it? https://convergeaccessibility.com/ Anyway, thanks again for taking this question seriously :)
- The topic ‘mobile menu trap focus’ is closed to new replies.