How do you make a Shopify mega menu keyboard accessible?

Mega menus are where keyboard accessibility goes to die on Shopify stores. They are built for mouse hover, stuffed with links, and often constructed from generic divs with no semantics at all. Making one keyboard accessible is very doable, but it has to be deliberate.

Why mega menus break keyboards first

A typical mega menu opens on hover, which keyboard users cannot do. Inside, dozens of links are crammed into containers that announce nothing useful to a screen reader. Focus often vanishes into the page behind the open menu, or the menu closes the moment focus moves, stranding the user.

The damage is concentrated: navigation appears on every page, so a broken mega menu is a broken experience everywhere. It is also one of the first things a plaintiff's firm tests, because it fails so reliably. If you fix one navigation pattern this quarter, make it this one.

Start with real semantics, not divs

The menu trigger must be a real button, and the destinations must be real links. Screen readers and keyboards understand buttons and links natively; they do not understand a div with a click handler no matter how pretty it looks. This single change fixes more mega menu issues than any other.

Use aria-expanded on the trigger so assistive tech announces whether the menu is open or closed, and aria-controls pointing at the menu container. These two attributes turn a mysterious widget into something a screen reader user can operate with confidence.

The keyboard interaction pattern

Follow the established disclosure pattern: Enter or Space opens the menu, Escape closes it and returns focus to the trigger, and arrow keys move between items within the menu. Tab should move into the menu and through it in a sensible order, not skip over it or get trapped inside it.

Decide whether the menu opens on focus or only on activation, and be consistent. Opening on focus can surprise keyboard users tabbing past; requiring activation is more predictable. Either is defensible if it is consistent and documented. What is not defensible is a menu that only opens on hover.

Keep focus visible and managed

When the menu opens, move focus into it or keep it on the trigger with the expanded state announced; when it closes, return focus to the trigger. Never leave focus stranded on a hidden element. And make sure the focus indicator is actually visible against the menu's background, because many themes style focus so subtly it disappears.

Test the close behaviors: Escape, clicking outside, selecting a link, and tabbing past the last item. Each one should leave focus somewhere sensible and announced. Focus management is the difference between a menu that is technically operable and one that is actually usable.

Test the whole path without a mouse

Unplug the mouse and run the full journey: open the menu, reach every link, close it, and continue to the page content. Then do it with a screen reader running, listening for whether the menu structure makes sense when announced. Two tools, thirty minutes, most issues found.

Common findings: links that are reachable but announced without context, submenus that cannot be opened by keyboard at all, and menus that close when focus moves to them. Log each with the exact keystrokes to reproduce, because the developer fixing it needs the recipe, not just the complaint.

Shopify theme pitfalls to watch

Many Shopify themes implement mega menus with custom JavaScript that was written mouse-first. Watch for hover-intent delays that also delay keyboard activation, for menus built from divs instead of lists, and for mobile drawer menus that share code with the desktop mega menu and inherit its problems.

App-injected navigation elements, like currency switchers or announcement bars with links, can also interfere with menu focus order. After fixing the menu itself, re-test with the store's apps active. The menu is fixed when a keyboard user can reach everything a mouse user can, with focus visible the whole way.