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#

Put text inside the button, or add aria-label. For icon buttons, label the action ("Close dialog").

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