How to fix buttons with no accessible name

WCAG 4.1.2 Name, Role, Value requires every button to expose a name that says what it does. The usual failures are icon-only buttons, the hamburger menu, search, close (×), play, and similar, where the button contains only an icon or SVG with no text. Assistive technology then has nothing to announce.

The simplest fix, if it suits the design, is visible text inside the button. When the button must stay icon-only, give it an accessible name with aria-label and hide the icon from assistive tech:

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

An alternative is visually hidden text inside the button, which some teams prefer because it survives translation:

<button>
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Open menu</span>
</button>

If you are using a <div> or <span> as a button, switch it to a real <button> so it also gets the correct role and keyboard behaviour.

Run the free scan above to list every button with no accessible name, with the element shown. Add the name, then re-scan. The same checks run as a browser extension and a CI gate, so a new icon button cannot ship unnamed.