Wanted to bring this to the Bricks Dev team attention especially since the Mobile Menu and Mega Menu is being worked on at the moment (according to the Bricks Roadmap).
Adam Lowe from Peak Performance Digital noted several accessibility issues in his latest video
They include:
Can’t use escape key to close menus
Dropdown menus only open with the space bar, not with the enter key (both should be usable)
Every top-level menu item has an aria-expanded attribute set. This means screen readers always announce the menu as expanded or collapsed whether it has a submenu or not.
Yes, please remove ‘role=menubar’ and ‘role=menuitem’ from the nav pattern. Menuitem is meant to be used with ‘menubar’ or ‘menu’, but neither is used for navigation (that’s why there’s a role=navigation!).
I’m not sure what version the video guy used, but I don’t see the aria-expanded attributes on top-level links.
FYI the second part of the video came out and it goes over in great detail the Nav menu found in the 2023 theme in WordPress 6.1 and how it is accessible. This is a great comparison and testing methodology used here that would be very helpful when updating the Bricks Nav menu.
Any update on whether we’ll get a solution to the issues raised above?
EDITED
Removed the aria-label comment - it seems now that if you add the attribute aria-label to a nav element it’ll actually hook into the right place. Never worked for me in the past.
They’re a bit like quantum physics - they’re not there until you try to see if they’re there with something like SiteImprove, then they magically appear. It’s very weird
