Buttons Must Have an Accessible Name

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.

<button></button>

Solution

A button needs discernible text so its purpose is clear. There are a few valid ways to provide it:

1. Visible label — use inner text:

<button>Search</button>

2. Icon-only button — use aria-label to describe the action:

<buttonaria-label="Search"><svg>...</svg></button>

3. Point to a visible label elsewhere with aria-labelledby:

<buttonaria-labelledby="lbl"></button><spanid="lbl">Search</span>

4. Fallback — title attribute (works, but less reliable than the above; prefer a real label):

<button title="Search"></button>

References

Buttons must have discernible text — Deque University (axe)