Buttons must have discernible text

Rule button-name · Forms · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A button announced as just "button" is unusable: the user cannot tell what it does. Icon-only buttons especially need an aria-label.

How to fix#

Give the button a name that says what it does — any of these works: visible text inside it; aria-label ("Close dialog"); aria-labelledby pointing at visible text; visually-hidden text inside it (an sr-only span); an <img alt="…"> or <svg>``<title>…</title>``</svg> inside it. A title attribute also supplies a name, but only as a tooltip most users never see, so prefer the options above. A button that is a decorative duplicate (a carousel clone, an icon beside a text link) should be hidden with aria-hidden="true" and tabindex="-1" rather than named. CSS-generated content (::before) and a placeholder do not name a button.

Example#

<button><svg aria-hidden="true"></svg></button>

<button aria-label="Close dialog"><svg aria-hidden="true"></svg></button>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• ARIA APG — Button