Core HTML base
ARIA roles, states and properties
<nav role="navigation">tag must be used to structure the hamburger button and menu.
aria-labelattribute must be included in the same
<nav role="navigation">tag and set with the name of the corresponding menu (e.g.
- The hamburger button must be marked with a
aria-expandedattribute 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.
Enter and Spacebar
When the keyboard focus is positioned on the hamburger button, these keys alternately display/hide the menu.
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.
- 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
- When the menu is collapsed, it must be hidden using
- The default
aria-expandedattribute value of the hamburger button must be modified dynamically each time the menu status changes.
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
idattribute of the menu must have only one value.
- The hamburger button
aria-controlsattribute must have the same value as the menu’s
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.