Accessibility

Menu Pattern

A menu is a way to display a list of actions a user can take. They can either be hidden (a menu button) or always shown (a menu bar). Menu bars are usually used for quick access to a consistent set of actions.

Behavior

  • Menus display a list of available actions
  • Menus cannot contain headings
  • Menu items can be grouped by the use of separators
  • Menu items can only perform a single action

Keyboard Interaction

Menu Button
  • Enter:
    • when focused on the menu button: opens the menu and focuses on the first item
    • when focused on a menu item: activates that item and closes the menu
  • Space: when focused on the menu button: opens the menu and focuses on the first item
  • Up arrow: when focused on a menu item: moves to the previous item (should wrap first to last)
  • Down arrow:
    • when focused on the menu button: opens the menu and focuses on the first item
    • when focused on a menu item: moves to the next item (should wrap last to first)
  • Right arrow: when focused on an item with a submenu: opens the submenu and focuses on the first item
  • Left arrow: when focused on an item within a submenu: closes the submenu and focuses on the parent item that contains the submenu
  • Escape: closes the menu or submenu and focuses on the parent button or item
  • Tab and Shift + Tab: navigate away from the menu and closes it
  • Recommended:
    • type a character: focus moves to the next item that starts with the character
Menu Bar

A Menubar should have all the same keyboard interaction as a menu button, with the addition of:

  • Right and Left: when on an item in the menu bar: navigate to the next/previous item
  • For submenus in items in the menu bar: the interaction is the same as menu buttons

Markup

Menu Button

Button
  • Has aria-haspopup="true"
  • Optional: aria-expanded="true|false" depending on if the menu is expanded or not
The Menu
  • Container element should have role="menu" applied
Menu Item Elements
  • If the item is actionable, role="menuitem" should be applied
  • If the item is a separator, role="separator" should be applied
  • Should have tabindex=-1 to make it focusable on click
  • If the item is disabled: needs aria-disabled="true"
  • If the item has a submenu: needs aria-haspopup="true"

Menu Bar

Requires all the same markup as a menu, except:

  • The container element should have role="menubar", instead of menu
  • tabindex=0 should be set on the only focusable item in the menu bar and should move with user selection. Default is the first item.

References

Usage in SLDS

Usage in Traditional Software Applications

ARIA Documentation: http://w3c.github.io/aria-practices/#menu