Mobile menu accessibility: Crawl Audit check 108

Short answer: on phones, the main menu usually hides behind a button. It has to be easy to find, and work with a keyboard and screen reader. Check 108 warns when the page has no navigation element or menu button at all.

What Crawl Audit checks

• Pass: a <nav>, an element with "hamburger" or "menu-toggle" in its class, or a button labelled as a menu.
• Warning: none.

It confirms a menu exists, not that it works. Test the button yourself with a keyboard.

Making the menu button accessible

The W3C's pattern for a show-and-hide menu:

• "The element that shows and hides the content has role button." A real <button> does this for you.
• When the menu is open, the button has aria-expanded="true"; when it's hidden, "it is set to false."
• Site navigation shouldn't use the ARIA menu role, which is meant for app-style menus.

<nav aria-label="Main">
  <button aria-expanded="false" aria-controls="main-menu">Menu</button>
  <ul id="main-menu" hidden>...</ul>
</nav>

What the research says

• Nielsen Norman Group's 2016 study of 179 people: "Discoverability is cut almost in half by hiding a website's main navigation."
• Their advice: "Label the menu", with the word "Menu" next to the icon, for people who don't recognise the three lines.
• If you have only a few main sections, show them as links on mobile rather than hiding them.

Sources

• W3C, Disclosure pattern and Disclosure navigation example, checked 6 October 2026.
• Nielsen Norman Group, Hamburger menus and hidden navigation hurt UX metrics and Beyond the hamburger (2016).