role-required-menu

Make sure that the role attribute of an interactive menu element is not incorrect or missing.

Description

Ensure that each individual menu item has the correct role (eg: menuitem), and the parent container has the appropriate role (eg: menubar).

You can refer to this guide by ARIA to create accessible menu and menubar elements.

For a list of appropriate roles, see ARIA-prescribed widget role.

Why is it important?

The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.

How to fix?

Define a menu element using the menuitem role or another appropriate role. If the element is composed of multiple interactive elements, add a composite role like menubar to the element from the set of ARIA-prescribed widget roles. If the menu element is not supposed to be interacted with, set the role as none or presentation.

Example

The following is an example of a menu without a defined role.

The following example shows the menu with the composite role menubar and individual item roles defined as menuitem.

Reference

• Using a WAI-ARIA role to expose the role of a user interface component
• Name, Role, Value (Level A)