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
<nav role="navigation">tag must be used to structure the menu.
aria-labelattribute must be included in the same
<nav role="navigation">tag and set with the name of the corresponding menu.
<li>tags must be used to structure the first-level buttons and sub-menu links.
- Each first-level button must be marked with a
aria-expandedattribute 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.
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.
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.
The sub-menus that are not displayed must be hidden using
display: none and/or