WAI-ARIA: Role=Menu
A type of widget that offers a list of choices to the user.
Description
A type of widget that offers a list of choices to the user.
A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.
To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.
Elements with the role menu have an implicit aria-orientation value of vertical.
Screen Reader Support For Role=Menu
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | supported |
| MUST convey the name if named | supported | supported | supported | supported | none | none | supported | supported | supported | none | none |
| MUST convey the boundaries of the menu | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
Role=Menu Example
HTML Example
<ul role="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span><ul role="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><li role="menuitem" aria-haspopup="false">New</li><li role="menuitem" aria-haspopup="false">Open…</li>...</ul></li>...</ul>HTML Example 2
<ul role="menu"><li role="menuitem">New</li><li role="menuitem">Open</li><li role="menuitem">Save</li><li role="menuitem">Close</li></ul>Characteristics
Characteristics
Superclass Role
- select
Subclass Roles
- menubar
Related Concepts
- list
Required Owned Elements
- group → menuitemradio
- menuitem
- menuitemcheckbox
- menuitemradio
Inherited States and Properties
- aria-activedescendant
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-orientation
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Implicit Value for Role
- Default for aria-orientation is vertical.
Semantic HTML
Use the HTML5 <menu> tag.
<menu type="context" id="mymenu"><menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem><menu label="Share on..."><menuitem label="Twitter" icon="ico_twitter.png"onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);"></menuitem><menuitem label="Facebook" icon="ico_facebook.png"onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);"></menuitem></menu><menuitem label="Email This Page"onclick="window.location='mailto:?body='+window.location.href;"></menuitem></menu>
Reference
- W3C (opens new window)
- A11Y Support
