Dropdown menu

  • Component

Update of the article from

Introduction

Dropdown menus help organize and display navigation options or actions in a compact, structured way. However, if they are not properly implemented, they create accessibility issues for many users.

An accessible dropdown menu ensures smooth and intuitive navigation for everyone, while complying with the recommendations of standards (WCAG, RGAA, EN 301 549, etc.).

In the following examples, we will use the dropdown menu available in the Boosted library.
This Bootstrap‑based library makes it possible to quickly design accessible interfaces in Orange brand colors and compliant with WCAG as well as the ARIA combobox design pattern

Dropdown menu

To make the dropdown menu accessible, pay particular attention to the following:

  • Support mouse and keyboard navigation (navigation with the Tab key, activation with Enter or Space, movement with the arrow keys).
  • Be compatible with assistive technologies (AT) by providing appropriate semantics, roles, and attributes (for example, aria-expanded and aria-current).
  • Provide sufficient visibility and contrast to ensure readable text and a clearly visible keyboard focus.
  • Ensure the behavior of the dropdown and item selection is predictable and consistent to avoid confusion.

Example

Example code


<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false" type="button" id="dropdownMenu1" data-bs-toggle="dropdown">
    My account
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">My cart</a></li>
    <li><a class="dropdown-item" href="#">My orders</a></li>
    <li><a class="dropdown-item" href="#">My information</a></li>
    <li role="separator" class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Log out</a></li>
  </ul>
</div>

ARIA attributes

  • aria-expanded: the aria-expanded attribute with a value of true/false allows assistive technologies to announce the menu state (open or closed).
  • aria-current: if the dropdown is used within a navigation menu, consider adding aria-current="page" to the item corresponding to the active page.
  • aria-haspopup: the aria-haspopup attribute is reserved for the menu role (see the “Special case of application menus” section). It is therefore not present in this implementation.

Time to test

Keyboard navigation

Move focus to the “My account” button using the Tab key and activate with the Enter key.
The menu opens.
Use the Up/Down arrow keys.
These allow you to move between the different menu items.
Press the Escape key.
The menu closes. When it closes, focus is automatically returned to the button that opens the menu.

Screen reader navigation

Place focus on the “My account” button.
The screen reader indicates that it is a dropdown menu and announces the menu state (open or closed).
Press the Enter key.
The menu opens, the first item is selected, and it is automatically announced by the screen reader.
Use the Up/Down arrow keys.
These allow you to move between the different menu items.
Select a menu item using the Enter key.
The menu closes. Since focus is automatically returned, the screen reader announces the menu button again, along with its state.

Additionally, the ARIA pattern describes the use of an aria-controls attribute, as well as optional extra keyboard interactions: Home/End.

Example: Example Disclosure for Navigation Menus

Special case of application menus

The ARIA pattern describes “Menu” and “Menubar” components, using the menu and menubar roles.

Note that this pattern is intended only for building application menus, whose interactions should be similar to menus in desktop applications, for example.

These implementations are more complex and not necessary for web navigation menus.

Example: Editor Menubar Example