Dropdown menu

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.

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

If you do not already use an accessible drop-down component, you will need to add some ARIA attributes in order to be correctly vocalized by the screen reader.

On the opening button: Example:

        <button aria-haspopup="true" aria-expanded="false">My account</button>
      
On the menu list items: Example:

        <button aria-haspopup="true" aria-expanded="false">Mon compte</button>
        <ul role="menu">
          <li><a href="#" role="menuitem">My cart</li>
          <li><a href="#" role="menuitem">My orders</li>
        </ul>