Hamburger menu

Sommaire

Core HTML base

<nav role="navigation" aria-label="Main menu">
  <button aria-expanded="true">
    <svg aria-hidden="true" focusable="false">[…]</svg>
    Menu
  </button>
  <ul class="visible">
    [Main navigation menu]
  </ul>
</nav>

ARIA roles, states and properties

Keyboard interactions

Enter and Spacebar

When the keyboard focus is positioned on the hamburger button, these keys alternately display/hide the menu.

Esc

If the keyboard focus is positioned on one of the menu items, Esc moves the keyboard focus to the hamburger button that triggered the menu display, and then closes it.

Expected behaviour

Note

If the hamburger button is not located immediately before the HTML menu, then it is important to technically associate the menu with the hamburger button that controls it.

This association must be declared through the attribute aria-controls:

<nav role="navigation" aria-label="Main menu">
  <button aria-expanded="true" aria-controls="main-menu">
    <svg aria-hidden="true" focusable="false">[…]</svg>
    Menu
  </button>
  […]
  <ul id="main-menu" class="visible">
    [Menu de navigation principal]
  </ul>
</nav>

Components

The “Hamburger menu” components are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.

Comments

Add a comment

Required fields are marked *.

Back to top