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.
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.
Did you find it helpful?Send feedback