After further research I determined that Magento breaks the jQuery UI Menu library's accessibility a few ways. Two primary ones being...
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.
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.