Accessible Mega Menus and Navigation Drawers: Keyboard Paths, Focus Order, and Escape Routes
Mega menus and mobile drawers hold the whole catalog, and they are where keyboard and screen reader shoppers most often get trapped or lost. How agencies should build and test them.
A mega menu is the largest interactive surface on most stores, and it usually gets the least accessibility testing. Designers review it open, on a big screen, with a mouse. Shoppers meet it closed, on a phone, with a keyboard, a screen reader, or a switch device, and judge the entire store by whether they can get through it.
Agencies build or configure navigation for nearly every client, so menu behavior is agency work with catalog wide consequences. The good news is that menus fail in predictable ways, and each failure has a known pattern that fixes it once at the template level.
Opening the menu is a keyboard decision first
Every menu trigger must be a real button that a keyboard can reach and activate, with a state that assistive technology announces: expanded or collapsed. Submenus should open on activation, not only on hover, because hover has no keyboard equivalent. Once open, the first item should be reachable in one predictable step, and arrow key behavior inside the menu should match what the visual layout suggests. If a sighted keyboard user cannot predict where focus goes next, the menu is not done.
Focus order must follow the visual order
Mega menus lay links out in columns, and the temptation is to let the code order wander: promotions first, then a column, then a featured product. Screen reader and keyboard users experience the menu in code order only. Read the menu top to bottom with a screen reader and check that the sequence still makes sense as a spoken list. Group headings should be real headings or labels, so a shopper can skim the structure instead of listening to forty undifferentiated links.
Every open menu needs a visible escape
A shopper who opens a menu must be able to close it and return to exactly where they were. The Escape key should close the menu and put focus back on the trigger. Clicking or tapping outside should close it too. Mobile drawers add their own rules: a labeled close button, focus kept inside the drawer while it is open, and the page behind it inert rather than scrollable and focusable at the same time. Test the drawer by opening it and tabbing slowly to the end. If you land somewhere behind the drawer, the trap is missing.
A menu test an agency can run before launch
Run four passes on the staging theme. Keyboard only: open every submenu, reach every link, close everything, in both desktop and mobile widths. Screen reader: listen to the trigger states and the full menu read in order. Zoom to 200 percent and repeat the desktop pass, because mega menus often break apart at zoom. Finally, open the menu and press only Escape, then check where you are. Four passes, under an hour, and they catch the failures shoppers actually meet.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Shopify Search and Filtering: Facets, Autocomplete, and Screen Readers, Accessibility Handover Notes: What to Document When a Client Changes Agencies, and Accessible Product Videos: Captions, Transcripts, and Audio Choices for Agency Clients.
Frequently asked questions
Should mega submenus open on hover or on click?
Both can work visually, but keyboard and touch users need activation on click or Enter, with the expanded state announced. A menu that only opens on hover is closed to anyone not using a mouse, whatever the design looks like.
Does a mobile drawer need to trap focus?
Yes, while it is open. Focus should cycle inside the drawer, the background should not be reachable by keyboard or swipe navigation, and closing the drawer should return focus to the button that opened it.
How many links can an accessible menu hold?
There is no fixed limit, but structure matters more as the count grows. Group links under real headings, keep the order logical, and let shoppers skip groups. A well structured eighty link menu beats a flat twenty link one.
What is the most common mega menu failure?
A trigger that is a styled link or div instead of a button, so keyboard users cannot open the submenu at all, followed closely by menus that open but cannot be closed with the keyboard. Both are one template fix each.