menu-popup

Ensure that menus with submenus or dropdowns include an aria-haspopup attribute set to true and that the triggering element can receive keyboard focus.

Description

If a menu has a dropdown or submenu, assistive technologies like screen readers can detect them easily if the aria-haspopup attribute is set to true. If this attribute is not defined or is set to false, users of assistive technologies might miss the information present in submenus or dropdowns.

Also, users should be able to trigger the dropdown or submenu using a keyboard. For this, the triggering element should be keyboard-focusable with an option to open the submenu or dropdown.

Example

In the following example, the menu has a submenu under ‘Services’. However, it doesn’t have the aria-haspopup attribute set as true, which breaks the menu-popup rule.

In contrast, the following code snippet has the aria-haspopup attribute set as true under the submenu ‘Services’. This step ensures that the menu-popup rule is followed.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if your site has menus with submenus and dropdowns. If so, set the aria-haspopup attribute to true on the menu item that has a submenu.

• Ensure that the menu items with the aria-haspopup attribute set as true are keyboard-focusable and users can open the submenus using a keyboard.

Reference

• WCAG 4.1.2: Name, Role, Value
• aria-haspopup HTML attribute