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

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

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=menu.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=menu.