Drop-down menu
Sommaire
Principle
A drop-down menu is usually a series of “buttons” displayed side by side. A sub-menu is displayed below the activated button.
Core HTML base
ARIA roles, states and properties
- The
<nav role="navigation">
tag must be used to structure the menu. - The
aria-label
attribute must be included in the same<nav role="navigation">
tag and set with the name of the corresponding menu. - Nested
<ul>
and<li>
tags must be used to structure the first-level buttons and sub-menu links. - Each first-level button must be marked with a
<button>
tag. - The
aria-expanded
attribute must be included in each first-level button. Its value must be dynamically set according to the status of the associated sub-menu:aria-expanded="false"
when the associated sub-menu is collapsed.aria-expanded="true"
when the associated sub-menu is expanded.
Keyboard interactions
Enter or Spacebar
- If the keyboard focus is positioned on a first-level button of a collapsed sub-menu, expand the associated sub-menu.
- If the keyboard focus is positioned on a first-level button on an expanded sub-menu, collapse the associated sub-menu.
Esc
If the keyboard focus is positioned on one of the items in a displayed sub-menu, this key moves the keyboard focus to the first-level button that triggered the sub menu display, and then closes the sub menu.
Note
The sub-menus that are not displayed must be hidden using display: none
and/or visibility: hidden
.