menuitem-name-present
Menu items have an accessible name
Checks that menu items (role="menuitem*", including checkbox/radio variants) expose a non-empty accessible name.
Applies to. Applies to elements whose role attribute resolves to menuitem, menuitemcheckbox or menuitemradio (the first token naming a known role, matched case-insensitively, so role="foo menuitem" and role="MENUITEM" count) that are included in the accessibility tree. A custom element whose ElementInternals give it one of those roles (this.attachInternals().role), with no role attribute naming another, is in scope too: that is its default role, and no other rule checks it.
Expectation. The element has a non-empty accessible name from aria-label, from an aria-labelledby that resolves to non-empty text, from title, or, all three roles being name-from-content, from its own subtree text, where a descendant's own name (an <img alt>, aria-label or title) counts as that descendant's contribution rather than only its text nodes.
Examples
<div role="menuitem" tabindex="0">Cut</div>
Visible text content is a valid name source for role="menuitem".
<div role="menuitem" tabindex="0"></div>
No name and no content.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
name_closedContent
- Find the menu item the report names and note the text or icon it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from content no script can read.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the menu item, taken from its content, and the screen reader announces it.
Fail. The menu item has no name in the accessibility tree, since its content gives none, which fails WCAG 4.1.2.
name_contentTooDeep
- Find the menu item the report names and note the text it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from all of its nested content.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the menu item, taken from its nested content, and the screen reader announces it.
Fail. The menu item has no name in the accessibility tree, since its content gives none, which fails WCAG 4.1.2.
name_internals
- Inspect the menu item the report names, a custom element, and note its role.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the menu item, set through its internals or otherwise, and the screen reader announces it.
Fail. The menu item has no name in the accessibility tree and the screen reader announces only its role, which fails WCAG 4.1.2.