Menu widget

As defined in the W3C Working Draft, Roles for Accessible Rich Internet Applications (WAI-ARIA Roles), a menu is a control offering a list of choices to the user. A menu is often a list of links to important sections of a Document or a Site. Menus contain menu items, and they are typically collected on a menubar.

Keyboard Interaction

First item in menu bar should be in the tab order (tabindex=0).
If a menu bar item has focus, then:
- Pressing Enter, Spacebar, or the up or down arrow keys opens the menu and places focus on the first menu item in the opened menu or child menu bar.
- If no menu is open, pressing left or right arrow keys moves focus to the adjacent menu bar items.
When a menu is open and focus is on a menu item in that open menu, then
- Pressing Enter or Spacebar invokes that menu action (which may be to open a submenu).
- Pressing up or down arrow keys cycles focus through the items in that menu.
- If the menu item with focus has a submenu, pressing Enter, Spacebar, or the right arrow key opens the submenu and puts focus on the first submenu item.
- Pressing Escape closes the open menu or submenu and returns focus to the parent menu item.
When a submenu is open and focus is on a menu item in that submenu:
- The up or down arrow keys cycle through the submenu items (behaves the same as open menu).
- Pressing Escape or the left arrow key closes the submenu and returns focus to the parent menu item.
Disabled menu items receive focus but have no action when enter or left/right arrow is pressed.
Tabbing out of the menu component closes any open menus.
With focus on a menu item and a sub menu opened via mouse behavior, pressing down arrow moves focus to the first item in the sub menu.
With focus on a menu item and a sub menu opened via mouse behavior, pressing up arrow moves focus to the last item in the sub menu.
With focus on a submenu item, the user must use arrows or the Escape key to progressively close submenus and move up to the parent item(s).

Mouse Interaction

Primary mouse click on a closed menu opens the menu; a second mouse click on the menu item closes the menu.
Primary mouse click on a menu item invokes that menu action (which may be to open a submenu).
A primary mouse click away from an open menu closes the menu.

ARIA Roles and Properties

Has the role menu, with required child elements of menu items.
Has the parent roles widget and list.

Example

XHTML Spreadsheet