Dropdown menu

Component

January 17, 2018

Introduction

In this example we will use the drop-down menu available in the Boosted library. This library based on Bootstrap allows you to quickly create UI components branded with the Orange colours.

The example implementation described below is suitable for navigation menus as well as for unit components presenting a list of actions.

Final example

This is how the drop-down looks with our library.

Code example


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 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 details</a></li>
    <li role="separator" class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Log out</a></li>
  </ul>
</div>

Testing

For this menu to be accessible, it must be usable with a mouse, keyboard and screen reader.

Keyboard navigation

Move the focus to “My Account” using the Tab key and press the Enter key.: The menu opens.
Use the up / down arrows.: These allow you to navigate the different menu items.
Press Escape.: The menu closes. On closing, the focus is automatically repositioned onto the button that opened the menu.

Screen reader navigation

Position the cursor on “My Account”.: The screen reader says there is a drop-down menu, and vocalizes the drop-down state (open or closed).
Press the Enter key.: The menu opens, the first item is selected. This element is automatically vocalized by the screen reader.
Use the up / down arrows.: These allow you to navigate to the different menu items.
Select a menu item using the Enter key.: The menu closes. As the focus is repositioned automatically, the screen reader again vocalizes the menu button, and its state.

ARIA attributes

aria-expanded: the aria-expanded attribute with a true/false value, allows to vocalize menu states (open or closed).
aria-current: if the dropdown menu is used within a navigation menu, provide for the addition of an attribute aria-current="page" on the item corresponding to the active page.
aria-haspopup: the aria-haspopup attribute is reserved for the menu role (see paragraph "Special case of application menus"). It is therefore not present in this implementation.


  <button aria-expanded="false">Mon compte</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Mon panier</a></li>
      <li><a class="dropdown-item" href="#" aria-current="page">Mes commandes</a></li>
      <li><a class="dropdown-item" href="#">Mes informations</a></li>
      <li role="separator" class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Déconnexion</a></li>
  </ul>

In addition, the ARIA pattern describes the use of an aria-controls attribute, as well as additional optional keyboard interactions: Home / End

Example: Example Disclosure for Navigation Menus

Special case of application menus

The ARIA pattern describes a "Menu" and "Menubar" component, using the roles menu or menubar.

Please note, this pattern is reserved only for the creation of an application menu, the interactions of which should be similar to the behavior of the menus present in desktop applications for example.

These implementations are more complex and unnecessary for web navigation menus.

Example: Editor Menubar Example