Accessibility improvement for the Desktop and Mobile site menu

[Anonymous 1444]

Anonymous 1444

September 4, 2020 at 6:26 am

Hi,

this is kind of a bug report.

I guess this is something to look into for your developers.

While working on our website I noticed that the menu has some accessiblity bugs. I list them in the following order:

1. On Desktop when hovering over the a.sf-with-ul parent menu items like Shop, Roastery, Brewing Guides: The parent items should have an aria-controls attribute pointing to the children ul. And the children ul should have an aria-expanded=true|false depending on its collapse/expand state. Also the parent item should have an aria-label like “Mouse hover to expand” or similar because the arrow-down icon is invisible to screen readers.

2. On Mobile the menu hamburger button just has an title=”menu” which is not enough for blind users. It should probably also get an aria-label like “Expand menu” (when collapsed) and “Collapse menu” (when expanded). And also an aria-controls pointing to the id of the ul it controls (mh-mobile_menu_collapse). the mh-mobile_menu_collapse ul already has aria-expanded which is great. But parent menu items like Shop, Roastery, Brewing Guides do not have the aria-expanded and aria-controls so they need to be added for the sub-menus too. These submenus probably would also need a better aria-label like “Expand” and “Collapse” and a role=”button” on the a href=”#”.

This is mostly important for impaired users so then are able to the menu. OTOH google nowadays also puts a small ranking fine on not accessibly sites as the google bot is kind of like a blind user.

Kind regards,
Jens