Accessibility rule: Menu item is missing a text alternative, explained

The menuitem role in HTML indicates that an element is an option in a set of choices contained by a menu or menubar. If a menu item is represented by an image or icon, it should be given a meaningful text description so that it is announced to a screen reader user. This rule flags menu items which are missing a text alternative.

Who is impacted by this barrier?

The barrier impacts screen reader users. As menu systems are often repeated on every single page of a website and are essential for navigation, this barrier has a broad impact.

How does the rule work?

The rule checks that each element with a menuitem role has a non-empty accessible name.

Read more about the rule in the technical documentation here.

How do I fix the issue?

Add an accessible name for the menuitem. The text should describe either:

• the website section, page, or subpage the menuitem links to or;
• the interaction the visitor can expect after they click on the menuitem 

Note that the title attribute is not always a reliable way to provide an accessible name. Use aria-label instead.