Buttons must have an accessible name that describes their purpose

WCAG 4.1.2
Name, Role, Value

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If a button does something, its name must say what it does.

Why this matters and how to fix it

Why this matters

Screen readers announce buttons using their accessible name. If a button has no name, users cannot determine what action it performs, making key interactions inaccessible.

How to fix this issue

Provide a meaningful accessible name for every <button>. If the button has no visible text, use `aria-label` or reference visible text using `aria-labelledby`.

Automated detection · Manual review recommended

Developer guidance

For icon-only buttons, require a label prop or `aria-label` in your component library. Confirm the name appears in the Accessibility Tree. Do not rely on <svg> <title> elements or decorative text to act as labels.

Code examples

Incorrect Implementation

<button><svg aria-hidden="true" focusable="false"><use href="#icon-search"></use></svg></button>

Correct Implementation

<button aria-label="Search"><svg aria-hidden="true" focusable="false"><use href="#icon-search"></use></svg></button>

Real-World Examples

Before

<button class="icon-btn"><svg><use href="#icon-close"></use></svg></button> <!-- Screen reader announces: 'button' -->

After

<button aria-label="Close" class="icon-btn"><svg><use href="#icon-close"></use></svg></button> <!-- Screen reader announces: 'Close, button' -->

Manual testing

  1. 1. Navigate to the button using Tab.
  2. 2. With a screen reader enabled, listen to what is announced.
  3. 3. Confirm the name clearly communicates the action (e.g., 'Search', 'Close', 'Submit').
  4. 4. If the button has no visible text and no accessible name, add `aria-label` or `aria-labelledby`.
  5. 5. Re-test to verify the accessible name appears in the Accessibility Tree.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance