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