How to fix: empty buttons / icon-only buttons

What it looks like in the wild

Screen reader announces "button" with no purpose.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Buttons need a programmatic name.

The wrong pattern (avoid)

<button><svg>...</svg></button>

The right pattern (copy this)

<button aria-label="Open notifications">
  <svg aria-hidden="true">...</svg>
</button>

Notes from real audits

• aria-hidden on the SVG prevents double announcement.

Related fixes