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 button has no accessible name, so a screen reader announces it as bare "button" with no indication of what it does. "Buttons must have discernible text" is axe-core's wording, which is what this scanner, Chrome DevTools and PageSpeed Insights all report, since Lighthouse's accessibility audits run axe-core.

"Discernible text" does not mean visible text. A name supplied by aria-label passes even though nothing is drawn on screen. The name is taken from the first of these that exists: aria-labelledby, then aria-label, then the button's text content (including the alt of an image inside it), then title, then value on an <input type="submit">.

The trap is an icon marked aria-hidden="true" inside a button with no other text. Hiding the icon is correct, but it removes the only thing that could have supplied a name, so the button ends up nameless. Add aria-label to the button whenever you hide its icon.

This is a genuine WCAG failure, not a best-practice warning: axe maps it to 4.1.2 Name, Role, Value at Level A.

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.

Icon buttons usually come from a shared component, so one nameless hamburger often means the same fault on every page. The scan above lists each button with no accessible name and the element it found, which tells you whether you are fixing one template or twenty pages. Add the name, then scan again to confirm. The browser extension is quicker for checking a single page while you work.