Skip to content

menuitem-non-empty-name-m6b1q3.md

Latest commit

 

History

History
executable file
·
167 lines (127 loc) · 4.91 KB

menuitem-non-empty-name-m6b1q3.md

File metadata and controls

executable file
·
167 lines (127 loc) · 4.91 KB
id m6b1q3
name Menuitem has non-empty accessible name
rule_type atomic
description This rule checks that each element with a `menuitem` role has a non-empty accessible name.
accessibility_requirements
wcag20:4.1.2
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
CSS Styling
DOM Tree
acknowledgments
authors funding assets
Wilco Fiers
WAI-Tools
The "file.svg" icon is part of the Feather Icons package, which uses the [MIT license](https://github.com/feathericons/feather/blob/master/LICENSE).

Applicability

This rule applies to HTML elements that is a semantic menuitem included in the accessibility tree.

Expectation

Each target element has an accessible name that is not empty ("").

Assumptions

This rule assumes that all menuitems are user interface components as defined by WCAG 2. If an element has a role of menuitem that would not be perceived as a single control by users, 4.1.2 Name, Role, Value would not apply and so failing this rule would not result in a conformance issue.

Accessibility Support

  • Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some semantic menuitem elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue.
  • aria-busy exists but, currently, is not widely supported, so the rule ignores it.

Background

Bibliography

Test Cases

Passed

Passed Example 1

This element with the menuitem role has an accessible name because of its text content.

<div role="menu">
	<button role="menuitem">New file</button>
</div>

Passed Example 2

This element with the menuitem role has an accessible name because of its aria-label attribute.

<div role="menu">
	<button role="menuitem" aria-label="New file">
		<img src="/test-assets/shared/file.svg" alt="" />
	</button>
</div>

Passed Example 3

This element with the menuitem role has an accessible name because its aria-labelledby attribute references an element with text content.

<div role="menu">
	<button role="menuitem" aria-labelledby="newfile">
		<img src="/test-assets/shared/file.svg" alt="" />
		<span id="newfile" hidden>New file</span>
	</button>
</div>

Passed Example 4

This element with the menuitem role has an accessible name because of its title attribute.

<div role="menu">
	<button role="menuitem" title="New file">
		<img src="/test-assets/shared/file.svg" alt="" />
	</button>
</div>

Failed

Failed Example 1

This element with the menuitem role has no accessible name because it has no content or attribute that can provide it.

<div role="menu">
	<button role="menuitem">
		<img src="/test-assets/shared/file.svg" alt="" />
	</button>
</div>

Failed Example 2

This off-screen element with the menuitem role has no accessible name because it has no content or attribute that can provide it.

<html lang="en">
	<style>
		.offscreen {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<div role="menu" class="offscreen">
		<button role="menuitem">
			<img src="/test-assets/shared/file.svg" alt="" />
		</button>
	</div>
</html>

Inapplicable

Inapplicable Example 1

The li element has a listitem semantic role, even as a child of a menu element.

<menu>
	<li>
		<a href="#">New file</a>
	</li>
</menu>

Inapplicable Example 2

This element with the menuitem role does not need an accessible name because it is not included in the accessibility tree.

<div role="menu" hidden>
	<button role="menuitem">
		<img src="/test-assets/shared/file.svg" alt="" />
	</button>
</div>