ARIA Menu Button Example: a element with role="button"

Authoring Practice Design Patten for Menu Button

Menu Button Example

This example provides a pop-up menu of links for web navigation.

WAI-ARIA Quick Links

Accessibility Features

Keyboard Support

Menu Button

Key Function
Space or Enter Key Open menu and move focus to first menu item
Up Arrow Key Open menu and moves focus to last menu item
Down Arrow Key Open menu and moves focus to first menu item

Menu

Key Function
Space or Enter Keys
  • Applies the styling associated with the menu item with focus
  • Closes menu and moves focus back to menu button
Up or Left Arrow Key Move focus to previous menu item
Down or Right Arrow Key Move focus to next menu item
Escape Key Close menu and move focus back to menu button

ARIA Roles, Properties and States

Role Property/State Usage
menu Identifies the div element as a menu widget
menuitem Identifies the a element as a menu item widget
aria-haspopup Identifies the button element as a menu button widget when the value is true
aria-controls Identfies the content on the page (e.g. using IDREFs) that this menu button controls
aria-labelledby Use to provide a label the menu widget

Source Code: Example 1