WAI-ARIA: Role=Menuitem • Digital A11y

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.

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">

<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">

<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>

Characteristics

Superclass Role

command

Subclass Roles

menuitemcheckbox

Related Concepts

menuitem in [html51]
listitem
option

Required Context Role

group
menu
menubar

Supported States and Properties

aria-posinset
aria-setsize

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)