Drop-down menu

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interactions.
• Note.

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

<nav role="navigation" aria-label="Main menu">
  <ul>
    <li>
      <button aria-expanded="false">Who we are and what we do</button>
      <ul class="non-visible">
        […]
      </ul>
    </li>
    <li>
      <button aria-expanded="true">Institutional relations</button>
      <ul class="visible">
        <li><a href="…">Institutional relations</a></li>
        <li><a href="…">Events</a></li>
        […]
      </ul>
    </li>
    <li><a href="…">International cooperation</a></li>
    […]
  </ul>
</nav>

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 and Spacebar

When the keyboard focus is positioned on a button, alternately displays/hides the sub-menu associated with that button.

Esc

If a dropdown is open, closes it and sets focus on the button that controls that dropdown.

Comments

Updates

Back to top