Fix a menu that needs a mouse
A menu that only opens on hover or click of a div cannot be used from the keyboard.
People who do not use a mouse cannot reach whole sections of the shop.
Steps
- Tab from the top of the page.
- Confirm menu items receive focus.
- Open submenus with Enter, not only hover.
Failing example
Menu items are divs with a click handler.
Better example
Menu items are links inside a nav.
Shopify
In the Shopify header, use a button for the mobile toggle and anchors for items. Submenus should open on focus.
WooCommerce
WooCommerce theme menus from Appearance, Menus should stay as links. Mega-menu scripts must move focus into the panel.
WordPress
Use the WordPress navigation block or wp_nav_menu.
Wix
Use the Wix menu element rather than shapes with click actions.