A: ARIA commands must have an accessible name (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that every ARIA button, link, and menuitem has an accessible name.

This means

Interactive ARIA elements (e.g., role="button", role="link", role="menuitem") require an Accessible Name. If missing (icon-only, empty <a>, SVG without text/label), screen readers only announce the role (“Button”), but no purpose.

Impact

Without a name, voice and screen reader usage is hindered; users cannot associate actions → dropouts, misuse, and WCAG violation (A).

Recommendation

• Prefer visible text within the element (short, clear).
• If no visible text is possible: use aria-label or aria-labelledby.
• Icon-only always with hidden text (.sr-only) or aria-label.
• Use native HTML controls whenever possible (<button>, <a> instead of div role="button").
• Avoid empty links/buttons.

Example

Problematic

<button><svg aria-hidden="true"></svg></button>        <!-- no name -->
<a href="#"><i class="icon-link"></i></a>              <!-- no link text/label -->
<div role="menuitem"></div>                            <!-- no name -->

Better

<button aria-label="Open search"><svg aria-hidden="true"></svg></button>
 
<a href="/donate">Donate now</a>
<!-- or: -->
<a href="/donate" aria-label="Donate now"><i class="icon-link" aria-hidden="true"></i></a>
 
<button role="menuitem">Profile</button>
<!-- or: -->
<div role="menuitem" aria-label="Profile">Profile</div>