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">
    [Main navigation menu]
  </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.

2 comments

  • Par Engineer Hamziey, le 16 August 2022 at 20h57.

    Do we still need to put `role=”navigation”` in the since it’s nag tag and it’s not just a div tag

    Répondre

    • Par Romain Desjardins (Atalan), le 17 August 2022 at 10h00.

      Hello,

      Thank you for your message.

      I confirm that the role="navigation" attribute is still needed here.

      The information is duplicated to ensure a correct restitution by the screen readers.

      The goal here is to make the information accessible to the largest number of users, especially those who do not have access to the latest versions of screen readers, which may not render the information without this attribute.

      Regards,

      Romain

      Répondre

Add a comment

Required fields are marked *.

Back to top