Skip to main content

Menus

Menus, like dialogs, rely on a few key principles to render them usable with the keyboard or screen reader.

Accessible menu​

The example below shows how to apply ARIA attributes to an unordered list element to give it the semantics screen readers need to announce it as a menu. It also demonstrates the JavaScript functionality you need to create the appropriate keyboard interaction.

  • You can move focus to the button by pressing tab.
  • Pressing enter with focus on the button opens the menu and moves focus to the first menu item.
  • Up and down arrows navigate the menu.
  • escape closes the menu, returning focus to the button.
  • If actions were implemented, pressing enter on a menu item would perform the action.
Live editor

Exercise: Inaccessible menu​

Update the example below to include the necessary markup for making this menu accessible. You should address the following issues.

  • The a tag with the ID menuTrigger has an associated popup. Therefore, it should be marked up with aria-haspopup and aria-owns to make this relationship explicit.
  • The a tag with the ID menuTrigger should be marked up as a button with the role button.
  • The a tag with the ID menuTrigger should be tabbable. Add an explicit tabindex="0" to it.
  • The ul tag with the ID actionsMenu should be marked up as a menu with the role menu.
  • The a tags inside the ul with the ID actionsMenu are menu items. Mark them up with the role menuitem.
  • The a tags inside the ul with the ID actionsMenu should not be tabbable. Add an explicit tabindex="-1" to each of them.
Live editor
Last updated on by Rachel