How are you supposed to navigate the mobile menu with the keyboard?

Question

I am working on fixing Magento accessibility issues to bring Magento 2 up to meet WCAG 2.0 AA. The mobile menu seems impossible to me to navigate with the keyboard. I can open up top level items using the arrow keys (tab does not work), but not further into the menu than that. On the level I can access, it also seems to only apply the class of .ui-state-focus as opposed to an actual :focus so built-in visible focus standards appear bypassed.

I'm curious if just missing something here on how to properly navigate this with just the keyboard? If not, is there a solution to resolve this without having to rebuild the whole menu?

FWIW I'm running Magento 2.3.6 using the Blank theme that comes with Magento.

Answer 1

After further research I determined that Magento breaks the jQuery UI Menu library's accessibility a few ways. Two primary ones being...

1. Since jQuery UI Menu uses role="menu" and role="menu-item" the user needs to use arrow keys to navigate to the different levels. I believe something with the Magento customization of forcing the expand of the 3rd level menu items in the mobile menu breaks the users ability to get to those items.

2. Since it uses role="menu" that means that the visible keyboard focus needs to be accounted for manually. Right now even for the items you can get to from the keyboard, they have no visible focus so you can't tell where you are.

I've inquired directly with our Magento Commerce support regarding various accessibility issues and they have confirmed they will not do anything about it currently although they are hoping to eventually improve accessibility. IMHO this cannot happen soon enough. Businesses in the US are being sued left and right for having inaccessible websites and with Magento being such a major influence as an e-commerce platform it seems like a massive oversight that it is still excluding so many users from its platform. For now, we will need to fix these things ourselves to protect our clients from lawsuits.

As a related side note, I find the role=menu method more difficult for people to use and it requires more effort on the developers part to handle focus manually. role=navigation/<nav> seems like a better way to go since users can use the standard tab functionality rather than less clear arrow keys to go back and forth.