Drop-down menu

Sommaire

• 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">First-level button with a hidden submenu</button>
      <ul class="non-visible">
        <li><a href="…">Second-level link</a></li>
        <li><a href="…">Second-level link</a></li>
        […]
      </ul>
    </li>
    <li>
      <button aria-expanded="true">First-level button with a displayed sub-menu</button>
      <ul class="visible">
        <li><a href="…">Second-level link</a></li>
        <li><a href="…">Second-level link</a></li>
        […]
      </ul>
    </li>
    <li><a href="…">First-level link</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 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.

Comments

Back to top