ARIA: menu role
Description
When a user activates a choice in a menu that has been opened, the menu usually closes. If the menu choice action invokes a submenu, the menu will remain open and the submenu is displayed.
Elements with the role menu have an implicit aria-orientation value of vertical. For horizontally oriented menu, use aria-orientation="horizontal".
Associated WAI-ARIA roles, states, and properties
Keyboard interactions
- Space / Enter
- : If the item is a parent menu item, it opens the submenu and moves focus to the first item in the submenu. Otherwise, activates the menu item, which loads new content and places focus on the heading that titles the content.
- Escape
- : When in a submenu, it closes the submenu and moves focus to the parent menu or menubar item.
- Right Arrow
- : In a menubar, moves focus to the next item in the menubar. If focus is on the last item, it moves focus to the first item. If in a submenu, if focus is on an item that does not have a submenu, it closes the submenu and moves focus to the next item in the menubar. Otherwise, it opens the submenu of the newly focused menubar item, keeping focus on that parent menubar item. If not in a menubar or submenu and not on a
menuitemwith a submenu, if focus is not the last focusable element in the menu, it optionally moves focus to the next focusable element.
- : In a menubar, moves focus to the next item in the menubar. If focus is on the last item, it moves focus to the first item. If in a submenu, if focus is on an item that does not have a submenu, it closes the submenu and moves focus to the next item in the menubar. Otherwise, it opens the submenu of the newly focused menubar item, keeping focus on that parent menubar item. If not in a menubar or submenu and not on a
- Left Arrow
- : Moves focus to the previous item in the menubar. If focus is on the first item, it moves focus to the last item. If in a submenu, it closes the submenu and moves focus to the parent menu item. If not in a menubar or submenu, if focus is not the first focusable element in the menu, it optionally moves focus to the last focusable element.
- Down Arrow
- : Opens submenu and moves focus to the first item in the submenu.
- Up Arrow
- : Opens submenu and moves focus to the last item in the submenu.
- Home
- : Moves focus to the first item in the menubar.
- End
- : Moves focus to the last item in the menubar.
- Any character key
- : Moves focus to the next item in the menubar having a name that starts with the typed character. If none of the items have a name starting with the typed character, focus does not move.
Examples
Below are two example menu implementations.
Example 1: navigation menu
<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>
To progressively enhance this navigation widget that is by default accessible, the class to hide the menu and the inclusion of tabindex="-1" on the interactive menuitem content should be added with JavaScript on load.
When including a "menu" for site navigation, do not use the menu role. Rather, for the main site navigation use the native HTML nav element or simply a list of links. The menu role should be reserved for composite widgets requiring focus management. See ARIA practices for disclosure navigation for an explanation and additional examples.
Example 2: menubar submenu option picker
The following snippet of code is a popup menu nested in a menubar. It is displayed when the menu button is activated. It is a menu to select the text color from a list of color options:
<div>
<button
type="button"
aria-haspopup="menu"
aria-controls="colormenu"
tabindex="0"
aria-label="Text Color: purple">
Purple
</button>
<ul role="menu" id="colormenu" aria-label="Color Options" tabindex="-1">
<li
role="menuitemradio"
aria-checked="true"
style="color: purple"
tabindex="-1">
Purple
</li>
<li
role="menuitemradio"
aria-checked="false"
style="color: magenta"
tabindex="-1">
Magenta
</li>
<li
role="menuitemradio"
aria-checked="false"
style="color: black;"
tabindex="-1">
Black
</li>
</ul>
</div>
The opening and closing of the menu toggles the aria-expanded="true" attribute on the button. It is added when the menu is open. Removed or set to false when the menu is closed. The true value indicates that the menu is displayed and that activating the menu button closes the menu.
The showing and hiding of the menu can be done with CSS. For example, in these code examples we can use the attribute and next-sibling selectors to toggle the visibility of the menu:
[role="menu"] {
display: none;
}
[aria-expanded="true"] + [role="menu"] {
display: block;
}
Specifications
See also
谢谢你的反馈！