MenuWidget

From W3C Wiki
Jump to: navigation, search


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

Example

XHTML Spreadsheet