Accessible navigation menus: hamburger and dropdown menus that work for everyone

Your menu is how visitors find your services, prices, booking and contact pages. If it only works with a mouse hover, or the phone menu button is a silent icon, some visitors simply can't get past your home page. Menus are also how screen readers, voice control and the newer AI browsing assistants move through a site, so a clear, standard menu helps them too (though no menu guarantees any particular tool will use it well).

The 5-minute menu test

Put the mouse aside, load your home page, and press Tab. Then repeat on your phone.

1. The first Tab shows a "Skip to main content" link, and pressing Enter jumps past the menu (WCAG 2.4.1 Bypass Blocks).
2. Every menu item gets a visible focus outline as you Tab through it (2.4.7 Focus Visible).
3. Dropdowns open with Enter or Space, not only on mouse hover, and you can reach every sub-item (2.1.1 Keyboard).
4. Escape closes an open dropdown, and it doesn't vanish while you're still moving the pointer into it (1.4.13 Content on Hover or Focus).
5. The phone menu button has a name. A screen reader should say "Menu, button, collapsed", not just "button" (4.1.2 Name, Role, Value).
6. When the phone menu opens, Tab goes into it, in a sensible order, not behind it to the page underneath (2.4.3 Focus Order).
7. The menu is in the same place, in the same order, on every page (3.2.3 Consistent Navigation).

HTML you can copy

W3C's ARIA Authoring Practices show website navigation as a simple show/hide (disclosure) pattern: real links inside a <nav>, with real buttons that open the sub-lists. See their disclosure navigation example and the W3C menus tutorial. A minimal version:

<a class="skip-link" href="#main">Skip to main content</a>

<nav aria-label="Main">
  <button type="button" aria-expanded="false" aria-controls="main-menu">Menu</button>
  <ul id="main-menu" hidden>
    <li><a href="/">Home</a></li>
    <li>
      <button type="button" aria-expanded="false" aria-controls="services-list">Services</button>
      <ul id="services-list" hidden>
        <li><a href="/services/repairs">Repairs</a></li>
        <li><a href="/services/installs">Installs</a></li>
      </ul>
    </li>
    <li><a href="/contact" aria-current="page">Contact</a></li>
  </ul>
</nav>
<main id="main">…</main>

A small script toggles each button's aria-expanded between "false" and "true" and shows or hides the list it controls; Escape closes the open list and returns focus to its button. Keep the visible word "Menu" next to the ☰ icon if you can, since many people don't recognise the icon. Style the skip link so it's hidden until it receives focus, rather than removing it.

Common mistakes we see

• Hover-only dropdowns that never open by keyboard or touch.
• A "Services" item that is both a link and a dropdown trigger, so tapping it on a phone either navigates away or does nothing. Make the trigger a button, and put an "All services" link inside the list.
• Application-style menu roles (role="menu") added to ordinary site navigation, which change how screen readers announce it and expect arrow-key behaviour most sites don't build. Plain links in a list are usually better.
• Low-contrast menu text over a photo or brand colour. Check it with our contrast checker.
• Tiny tap targets in the phone menu. See our mobile guide.

On Wix, Squarespace, Shopify or WordPress

You usually can't change the menu's code, but you can pick a theme or template whose menu passes the test above, use real text labels instead of icons, keep sub-menus short, and turn on any built-in skip link or accessibility setting. Our Wix, Squarespace, Shopify and WordPress guides cover each platform. If the built-in menu fails, report it to the platform's support.

What an automated scan can and can't tell you

An automated scan, including ours, catches an unnamed menu button, missing link text, low contrast and some ARIA mistakes. It can't tell whether a dropdown opens by keyboard, whether focus moves into the phone menu, or whether Escape works. The 5-minute test above covers those. This page is general information, not legal advice.

Related: 5-minute keyboard test, link text and buttons, AI-ready website accessibility, accessible sliders and carousels.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Accessible image sliders and carousels: a 5-minute test and fixes for small-business sites
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.