Buttons without an accessible name

Medium priorityTechnical

Some <button> elements have no text, aria-label or title, so screen readers announce them as just “button”.

What triggers this issue

• One or more buttons contain no text and no aria-label, aria-labelledby, title or labelled image or SVG.

Why it matters

Icon-only buttons (menus, search, close, play) are common. Without a name, blind and voice-control users can’t tell what they do or ask for them by name. It is a WCAG failure that Lighthouse flags.

How to fix it

1. Add visible text, or an aria-label that says what the button does.
2. Hide the decorative icon from assistive tech with aria-hidden="true".

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