Accessibility Examples: Navigation Menus

Required HTML Markup

A menu toggle must indicate whether its associated menu is expanded or collapsed. This requires the following ARIA attributes:

• aria-expanded – Set to true if the menu is expanded; false if the menu is collapsed.
• aria-controls – Set to the HTML id of the menu toggled by this button.
• aria-haspopup – Set to true. This attribute informs a user that the button is a menu button.
• aria-hidden – Placed on the controlled menu to hide it from screen readers when collapsed. Set to false when expanded; true when collapsed.

Below is a code snippet showing simplified markup for implementing an accessible menu toggle button. The values of the aria-expanded and the aria-hidden attributes are shown for the collapsed state.

<button aria-expanded="false" aria-haspopup="true" aria-controls="menu-id">Toggle Menu</button>     
<ul id="menu-id" aria-hidden="true">
   . . .
</ul>
   

Here is the snippet with the menu in the expanded state:

<button aria-expanded="true" aria-haspopup="true" aria-controls="menu-id">Toggle Menu</button>     
<ul id="menu-id" aria-hidden="false">
   . . .
</ul>
   

JavaScript is needed to toggle the values of the aria-expanded and aria-hidden attributes. Note that the values of aria-controls and aria-haspopup do not change.

Note: The aria-hidden attribute is not needed in modern browsers. Using display: none or visability: hidden is sufficient. The attribute is included here for illustrative purposes.

Interaction Pattern

• Activating the menu button will toggle the menu open and closed. If the menu is closed, activating the button will open the menu and move focus to the first menu item.
• Use the up and down arrow keys to move between menu items.
• Pressing the tab key while in the menu will move focus out of the menu, either to the next focusable element in the page or to the menu button, if shift-tab.
• Pressing the escape key while focus is in the menu will close the menu and return focus to the menu button.