Navigation Menu Button Example

This example implements the menu button design pattern for a button that provides access to a menu of link targets. An ARIA menu button is defined as any element with role="button" with an aria-haspopup="true". In this example the default role of link for the a element is overridden using role="button" to define the menu button. It is also important to note in the popup menu that the role=menuitem is on the a element and not the li element, since a menuitem widget cannot contain any intereactive elements (e.g links).

Similar examples include:

Example

Keyboard Support

Menu Button

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

Popup Menu

Key Function
Space or Enter
  • Activates the link asociated with the menuitem.
Escape
  • Closes popup menu.
  • Moves focus to button menu.
Up Arrow
  • Moves focus to previous popup menu item.
  • If first popup menu item, focus is moved to the last popup menu item.
Down Arrow
  • Moves focus to next popup menu item.
  • If last popup menu item, focus is moved to the first popup menu item.
Home
  • Moves focus to first popup menu item.
End
  • Moves focus to last popup menu item.
A-Z, a-z
  • Moves focus to the next popup item that starts with that letter.
  • If no popup menu item starts with the letter, focus does not move.

Role, Property, State, and Tabindex Attributes

Menu Button Widget

Role Attribute Element Usage
button a
  • The role="button" overrides the default role of link for an a element and identifies the element as a ARIA buton widget.
  • The accessible name comes from the child text content of the a element (e.g. "WAI-ARIA Quick Links").
  • The a[href="#"] element is a part of the default tab order of the page, so no need to set tabindex.
href="#" a
  • Setting href="#" will insure the a element will be part of the default tab order of the page.
aria-haspopup="true" a
  • The aria-haspopup attribute defines an element with role=button as a ARIA menu button design pattern and indicates the actions of the button are to open and close the popup menu.
aria-controls="IDREF" a
  • The aria-controls attribute serves as a pointer to the the popup menu that is controlled by the menu button.
aria-expanded="true" a
  • Indicates popup menu is open.
aria-expanded="false" a
  • Indicates popup menu is closed.

Popup Menu Widget

Role Attribute Element Usage
menu ul
  • The role="menu" attribute identifies the ul element as an ARIA menu widget.
  • Accessible name for the menu widget comes from aria-labelledby attribute.
  • The menu widget does not need a tabindex value, since the ul[role"menu"] element never receives keyboard focus.
aria-labelledby="[IDREF]" ul
  • Pointer to element with the corresponding id="[IDREF]" that defines the accessible name for the menu, in this example "Actions".
menuitem a
  • The role="menuitem" attribute overrides the default link role of the a element.
  • Accessible name for the menuitem widget comes from child text content of the a element.
  • The menuitem widget has tabindex="-1".
tabindex="-1" a
  • Identifies the link (e.g. a[role=menuitem]) as an interactive element on the page, but removes the link from the tab order of the page.
none li
  • Hides li element native role semantics of listiem from assistive technologies.
  • If native role semantics of the li element are not removed, it could confuse some users of assistive technologies since listitems and menuitems would be interspersed with each other.

Javascript and CSS Source Code

HTML Source Code