ARIA: menuitem role
The menuitem
role indicates the element is an option in a set of choices contained by a menu
or menubar
.
Description
A menuitem
is one of the three types of options in a set of choices contained by a menu
or menubar
; the other two being menuitemcheckbox
and menuitemradio
. The menuitem
is only found as a descendant of, or owned by, elements with role menu
or menubar
, optionally nested within an element with role group
that is contained in, or owned by, a menu.
If the menuitem
is not a descendant of a menu in the DOM, include the aria-owns
attribute on menu to indicate the relationship. If aria-owns
is set on the menu container to include elements that are not DOM children of the container, those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children in supporting technologies. Ensure the visual focus order matches the assistive technology reading order.
Every menuitem
in a menu is focusable, whether or not it is disabled. Indicate a menuitem
is disabled by setting aria-disabled="true"
on the element with the role.
If a menuitem
has a submenu, program it to display a new sub-level menu when the menu item is activated and include aria-haspopup="menu"
or with the true
value to indicate to assistive technologies that the menu item is used to open a submenu.
A common convention for indicating that a menuitem
launches a dialog box is to append "…" (ellipsis) to the menu item label, e.g., "Save as …".
Every menuitem
must have an accessible name. This name comes from the element's contents by default. If the contents don't provide for a useful accessible name, aria-labelledby
can be used to reference visible label. If no visible content is available to provide the accessible name, an accessible name can be provided with aria-label
.
Associated WAI-ARIA roles, states, and properties
-
A widget providing a list of choices. Required context role (or
menubar
) -
A presentation of a
menu
that usually remains visible and is usually presented horizontally. Required context role (ormenu
) group
role-
Can be used to identify a set of related
menuitem
s within or otherwise owned by amenu
ormenubar
aria-disabled
-
Indicates the element is perceivable but disabled, so it is not operable
aria-haspopup
-
Indicates the availability and type of interactive popup that can be triggered by the
menuitem
Keyboard interactions
- Enter and Space
-
If the
menuitem
has a submenu, opens the submenu and places focus on its first item. Otherwise, activates the item and closes the menu. - Down Arrow
-
On a
menuitem
that has a submenu in amenubar
, opens the submenu and places focus on the first item in the submenu. Otherwise, moves focus to the next item, optionally wrapping from the last to the first. - Up Arrow
-
Moves focus to the previous item, optionally wrapping from the first to the last. Optionally, if the
menuitem
is in a menubar and has a submenu, opens the submenu and places focus on the last item in the submenu. - Right Arrow
-
If in a
menu
opened with a menubutton and not in amenubar
, if the menuitem does not have a submenu, does nothing. When focus is in amenubar
, moves focus to the next item, optionally wrapping from the last to the first. When focus is in amenu
and on amenuitem
that has a submenu, opens the submenu and places focus on its first item. When focus is in amenu
and on an item that does not have a submenu, closes the submenu and any parent menus, moves focus to the next item in themenubar
, and, if focus is now on amenuitem
with a submenu, either opens the submenu of thatmenuitem
without moving focus into the submenu, or opens the submenu of thatmenuitem
and places focus on the first item in the submenu. - Left Arrow
-
When focus is in a
menubar
, moves focus to the previous item, optionally wrapping from the first to the last. When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parentmenuitem
. When focus is in a submenu of an item in amenubar
, closes the submenu, moves focus to the previous item in themenubar
, and, if focus is now on amenuitem
with a submenu, either opens the submenu of thatmenuitem
without moving focus into the submenu, or opens the submenu of thatmenuitem
and places focus on the first item in the submenu. - Home
-
If arrow key wrapping is not supported, moves focus to the first item in the current
menu
ormenubar
. - End
-
If arrow key wrapping is not supported, moves focus to the last item in the current
menu
ormenubar
. - Any key that corresponds to a printable character (Optional)
-
Move focus to the next item in the current menu whose label begins with that printable character.
- Escape
-
Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent
menuitem
, from which the menu was opened. - Tab
-
Moves focus to the next element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.
- Shift + Tab
-
Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.
If a menu is opened or a menu bar receives focus as a result of a context action, Escape or Enter may return focus to the invoking context.
Some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu. In such implementations, Enter and Space perform a navigation function while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.
When items in a menubar
are arranged vertically and items in menu containers are arranged horizontally the Down Arrow performs as Right Arrow is described above, the Up Arrow performs as Left Arrow is described above, and vice versa.
Examples
html
<div>
<button id="menubutton" aria-haspopup="true" aria-controls="menu">
<img src="hamburger.svg" alt="Page Sections" />
</button>
<ul id="menu" role="menu" aria-labelledby="menubutton">
<li role="presentation">
<a role="menuitem" href="#description"> Description </a>
</li>
<li role="presentation">
<a
role="menuitem"
href="#associated_wai-aria_roles_states_and_properties">
Associated WAI-ARIA roles, states, and properties
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#keyboard_interactions">
Keyboard interactions
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#examples"> Examples </a>
</li>
<li role="presentation">
<a role="menuitem" href="#specifications"> Specifications </a>
</li>
<li role="presentation">
<a role="menuitem" href="#see_also"> See Also </a>
</li>
</ul>
</div>
Specifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # menuitem |
ARIA Authoring Practices # menu |