ARIA Menu Button Example: Button Element

Authoring Practice Design Patten for Menu Button

Menu Button using a button element

This example provides a menu of actions for changing the state in a web application.

Menu Button Widget

Keyboard Interaction and Focus Management

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

Menu Widget

Keyboard Interaction and Focus Management

Key Function
Space or Enter Keys
  • Activates any click event associated with the menuitem. In this example updates the "Last Action" textbox.
  • Moves focus back to menu button and then closes the menu. NOTE: This sequence is important since hidding the element with focus will cause the focus to move to the beginning of the page.
Up Arrow Key Move focus to previous menuitem.
Down Arrow Key Move focus to next menuitem.
Escape Key Move focus back to menu button and then close menu. NOTE: This sequence is important since hidding the element with focus will cause the focus to move to the beginning of the page.

Accessibility Features

Keyboard Support

ARIA Roles, Properties and States

Role Property/State Usage
menu Identifies the ul element as a menu widget
menuitem Identifies the li 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