Fix keyboard inaccessible menu on Shopify

This page shows how to fix keyboard inaccessible menu on Shopify. A menu that only opens on hover or click of a div cannot be used from the keyboard.

Steps in Shopify

In the Shopify header, use a button for the mobile toggle and anchors for items. Submenus should open on focus.

Check

1. Tab from the top of the page.
2. Confirm menu items receive focus.
3. Open submenus with Enter, not only hover.

All platforms · Shopify · WCAG 2.1.1