What This Rule Checks
ARIA command roles, such as role=”link”, role=”button”, and role=”menuitem”, must have a clear and accessible name. This ensures that users of assistive technologies, such as screen readers, can interact with and understand the purpose of these command elements.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Interactive elements like buttons, links, and menu items that lack accessible names are completely opaque to screen reader users. They hear “button” with no context about what it does. This is a WCAG 4.1.2 Level A violation frequently cited in litigation.
How to Fix
To make ARIA command elements accessible, ensure the following:
Provide Discernible Text: If the element has visible text, make sure it is clear and discernible to screen reader users.
Use aria-label or aria-labelledby: If the element does not have visible text, use the aria-label attribute to assign a clear, descriptive name, or use aria-labelledby to reference another element that provides the name.
Code Examples
<!-- Button role with no accessible name -->
<div role="button" tabindex="0">
<svg viewBox="0 0 24 24">
<path d="M3 18h18v-2H3v2z"/>
</svg>
</div>
Copy
<!-- Button role with accessible name -->
<div role="button" tabindex="0" aria-label="Open menu">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2z"/>
</svg>
</div>
Copy
Common Mistakes to Avoid
- Relying on a tooltip or title attribute as the only accessible name.
- Assuming the icon inside a button conveys meaning to screen readers.
- Using aria-label that does not match the visible icon’s purpose.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value