WAI-ARIA: Role=MenuItem
A presentation of menu that usually remains visible and is usually presented horizontally
Description
An option in a set of choices contained by a menu or menubar.
Authors MAY disable a menu item with the aria-disabled attribute. If the menu item has its aria-haspopup attribute set to true, it indicates that the menu item may be used to launch a sub-level menu, and authors SHOULD display a new sub-level menu when the menu item is activated.
Authors MUST ensure that menu items are owned by an element with role menu or menubar in order to identify that they are related widgets. Authors MAY separate menu items into sets by use of a separator or an element with an equivalent role from the native markup language.
Screen Reader Support For Role=MenuItem
| 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 | none | none | supported | supported | supported | supported | supported |
| MUST convey the name | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| MAY convey information about the position the menu item in the menu | supported | supported | supported | none | supported | supported | supported | none | none | none | none |
Role=Menuitem Example
HTML Example
<ul role="menu">
<li role="menuitem">New</li>
<li role="menuitem">Open</li>
<li role="menuitem">Save</li>
<li role="menuitem">Close</li>
</ul>HTML Example 2
<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>Characteristics
Superclass Role
Subclass Roles
Related Concepts
- menuitem in [html51]
- listitem
- option
Required Context Role
Supported States and Properties
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- contents
- author
Accessible Name Required
- True
Semantic HTML
Use the HTML5 <menuitem> 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
