Accessible navigation and mega menus

Build site navigation as a list of ordinary links inside a nav element. Open each dropdown or mega menu with a real button that says whether it is expanded, not on hover alone, and let Escape close it and return focus to that button. Do not use role="menu" for website navigation. Add a skip link, mark the current page, keep the menu in the same order on every page, and make sure the mobile menu works like a dialog.³⁷

Menus are where many stores lose keyboard and screen reader users before they reach a single product. In WebAIM's 2024 survey of screen reader users, "interactive elements such as menus, tabs and dialogs do not behave as expected" ranked second among the most problematic items on the web, after CAPTCHA; "too many links or navigation items" was also on the list.¹²

Structure: links in a list, inside nav

W3C's menus tutorial asks for markup that reflects the menu's structure and labels it, and clear, familiar visual states such as the current page.¹ Shopify's theme guidance is specific: wrap navigation in nav, use aria-current for the current page, and do not use role="menu" or role="menuitem" for site navigation.⁷

Why not role="menu"? The ARIA Authoring Practices explain that the menu role brings the expectations of a desktop application menu, with arrow-key navigation and other behaviour that ordinary site navigation does not need. Using it on a list of links can mislead screen reader users. Their navigation example uses the disclosure pattern instead.³

Dropdowns and mega menus: the disclosure pattern

A dropdown or mega menu is a set of links hidden until a button shows them. The ARIA example navigation menu works like this:³

Shopify's theme guidance matches it: Enter and Space open the menu, focus stays on the button and Tab moves into the first item, and Escape closes it and returns focus to the button.⁷ Shopify Theme Store themes must also make dropdown navigation keyboard accessible.⁸

When the top-level item is also a link

Many stores want "Women" to go to a women's collection page and also open a dropdown. W3C's fly-out menu tutorial covers this: add a separate button next to the link, with a hidden label such as "Show Women submenu", that opens and closes the submenu. If the top-level item only summarises its submenu, the item itself can be the button.² It also advises that submenus should not open just because someone tabs past, so keyboard users are not forced through every link.²

Hover menus

Opening on hover is fine as long as it is not the only way. When a menu appears on hover or focus, WCAG 1.4.13 (level AA) asks that it can be dismissed without moving the pointer, for example with Escape; that the pointer can move onto it without it closing; and that it stays open until dismissed or the pointer leaves.⁴ W3C's fly-out tutorial suggests a short delay before closing when the pointer leaves, and uses one second in its example, which helps people with less precise mouse control.²

Mega menus need extra care

• Headings inside the panel. If a mega menu groups links under "Shoes", "Bags" and "Accessories", mark those as headings or group labels so a screen reader user hears the structure.
• Images with purpose. A promotional image in a mega menu that is a link needs alt text saying where it goes; one that only decorates needs empty alt text.
• Not too many links. Every link in an open mega menu is a Tab stop. Keep panels closed until asked for, and keep them focused.
• Other routes. W3C notes that fly-out menus can be hard for people with reduced dexterity and suggests also providing the submenu links elsewhere, such as on the parent page.²

Mobile menus

On phones, most themes put navigation in a drawer that slides over the page. If it covers the page and blocks interaction with it, treat it as a modal dialog: focus moves into the drawer when it opens, Tab stays inside, Escape closes it, and focus returns to the menu button.¹⁰ Shopify's guidance for theme drawers says the same.⁷ The menu button needs a name, such as "Menu", and should say whether it is expanded. Nested levels inside the drawer follow the same disclosure pattern as on desktop.

Keep the buttons big enough to tap. WCAG 2.2's 2.5.8 Target Size asks for at least 24 by 24 CSS pixels, or enough space around smaller targets.⁹

The rest of the header

• Skip link. WCAG 2.4.1 asks for a way to bypass blocks repeated on every page; a link at the top that goes straight to the main content is the usual technique.⁵ Shopify's guidance is to make it visible when focused.⁷
• Same order on every page. WCAG 3.2.3 (level AA) asks that navigation repeated across pages appears in the same relative order each time.⁶
• Sticky headers. A header that stays at the top of the screen must not completely hide whatever has keyboard focus as people tab down the page, which fails 2.4.11 Focus Not Obscured (Minimum). W3C lists CSS scroll-padding as a fix.¹¹
• Icon links. Search, account and cart icons need names, ideally including the cart count: "Cart, 2 items".

Test your menu in five minutes

1. Tab from the address bar. Is the first stop a skip link?
2. Tab to a top-level item with a dropdown. Can you open it with Enter or Space, tab through its links, and close it with Escape, landing back on the button?
3. Tab past a closed dropdown. Do you skip over its links?
4. With a screen reader, listen to a dropdown button. Does it say "collapsed" or "expanded"?
5. On a phone or narrow window, open the mobile menu, move through it, and close it without touching the page behind.
6. Run an automated check. Jralo's free check catches links and buttons with no name and other WCAG 2.2 A and AA failures on your homepage and up to five linked pages, and points to the countries whose accessibility laws are likely relevant to your site. Whether a menu opens, closes and returns focus properly needs a person; automated testing finds many problems, not all.

The menu is usually one template shared by every page, so a fix there improves the whole site. For a safe way to change it, see fixing accessibility without breaking your theme, and for the full keyboard pass, how to test with only a keyboard in 10 minutes.