ARIA Design Patterns: Menu Button & Menu
Example 1. Menu button with menu containing action items
This example illustrates the use of a menu button that controls a popup menu of actions for changing
the state in a web application.
In particular, selecting an item from the menu controlled by the 'Actions' button updates the 'Last Action' textbox.
Menu Button: Keyboard Interactions
From ARIA Authoring Practices 1.1: Menu Button
With focus on the button:
- Space and Enter: open the menu and place focus on the first menu item.
- (Optional) Down Arrow: opens the menu and moves focus to the first menu item.
Menu: Keyboard Interactions
From ARIA Authoring Practices 1.1: Menu
When a menu opens and its items are arranged vertically:
- Keyboard focus is placed on the first item. All items in a menu are focusable as described in 4.1.3 Keyboard Navigation within Widgets.
- Enter and optionally Space: activate the menu item with focus (perform the command or open the submenu associated with the menu item).
- Down Arrow and Up Arrow: move focus to the next and previous items, respectively, optionally wrapping from last to first and vice versa.
- Home and End: If arrow key wrapping is not supported, move focus to first and last items.
- Any key that corresponds to a printable character: Move focus to the next menu item in the current menu whose label begins with that printable character.
- Escape: Close the menu and return focus to the element or context, e.g., menu button or parent menu item, from which the menu was opened.
- Tab: Close the menu and all open parent menus and move focus to the next element in the tab sequence.
- Shift + Tab: Close the menu and all open parent menus and move focus to the previous element in the tab sequence.
Note: For Left Arrow and Right Arrow, the APG gives the option to "do nothing" when the menu does not contain any submenus. Since that is the case in this example, that option was chosen.
For Developers
The following resources provide descriptions of the ARIA, HTML and JavaScript implementation details for this example.