Rampsight

All rules

ARIA

ARIA buttons, links and menu items need a name

Why it matters

An element with role="button", "link" or "menuitem" and no text is announced as just "button" — the person has no way to know what it does before pressing it.

How to fix it

  1. Put visible text inside the element wherever the design allows it.
  2. For icon-only controls, add aria-label with the action ("Delete", "Add to basket").
  3. Mark the decorative icon itself aria-hidden="true" so it is not read as part of the name.

In markup

Fails
<div role="button" tabindex="0"><svg aria-hidden="true">...</svg></div>
Passes
<div role="button" tabindex="0" aria-label="Delete">
  <svg aria-hidden="true">...</svg>
</div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on aria-command-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.