Hamburger menu

Sommaire

Core HTML base.
ARIA roles, states and properties.
Keyboard interactions.
Expected behaviour.
Note.

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

The <nav role="navigation"> tag must be used to structure the hamburger button and menu.
The aria-label attribute must be included in the same <nav role="navigation"> tag and set with the name of the corresponding menu (e.g. aria-label="Main menu").
The hamburger button must be marked with a <button> tag.
The aria-expanded attribute must be applied to the hamburger button that controls the menu. Its value must be set dynamically according to the status of the menu:
- aria-expanded="true" when the menu is expanded.
- aria-expanded="false" when the menu is collapsed.

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

When the keyboard focus is positioned on the hamburger button, the menu can be displayed/hidden using the Spacebar and Enter keys. To do this, listen to the click event.
When the menu is collapsed, it must be hidden using display: none; and/or visibility: hidden;.
The default aria-expanded attribute value of the hamburger button must be modified dynamically each time the menu status changes.

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:

The id attribute of the menu must have only one value.
The hamburger button aria-controls attribute must have the same value as the menu’s id attribute.

<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.

4 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
Par Steffi, le 4 August 2023 at 11h54.

According to W3C Recommendations the adding of role=”navigation” is allowed, but not recommended. See: https://www.w3.org/TR/html-aria/#el-nav

Répondre
- Par Romain Desjardins (Atalan), le 7 August 2023 at 8h30.
  
  Hello Steffi,
  
  Thank you for your comment.
  
  The information is a duplicate of the nav tag to ensure a correct restitution by the screen readers. The W3C says it is not recommended, because it follows the first ARIA rule.
  But in this case, there are only benefits to adding this role.
  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.
  
  Adding the role=”navigation” (and other landmark tags) is also to be compliant with French accessibility standards (RGAA).
  
  Regards,
  
  Romain
  
  Répondre