Button has no accessible name

What this means

A button on the page has no discernible text that screen readers can announce. The user hears “button” but does not know what the button does.

WCAG requirement

Success Criterion 4.1.2 — Name, Role, Value: all user interface components must have a name that can be programmatically determined.

Common causes

• Icon-only buttons with no text or aria-label (hamburger menu, close X, shopping cart)
• Buttons containing only an <img> or <svg> with no alt text
• Empty <button> elements styled with CSS background images

How to fix

1. Add visible text: the simplest and most robust solution
2. Add aria-label: <button aria-label="Open menu"><svg>...</svg></button>
3. Add alt to images inside buttons: <button><img src="cart.svg" alt="Shopping cart"></button>
4. Use aria-labelledby when the label text exists elsewhere on the page