Back to Learn
Pulseaccessibility

Buttons Have an Accessible Name

What This Audit Checks

This audit verifies that all <button> elements and elements with role="button" have an accessible name. The name can come from text content, aria-label, aria-labelledby, or the title attribute.

Why It Matters

Buttons are the most common interactive element on the web. A button without a name is announced as simply "button" by screen readers, giving users no indication of what it does. This is one of the most impactful accessibility issues you can fix.

How to Fix It

  • Add visible text inside the button. This is the simplest and most robust approach.
  • Use aria-label for icon-only buttons where visible text is not part of the design.
  • Add alt text to <img> elements inside buttons if the image is the only content.
  • Never rely on title alone -- it's not consistently announced by screen readers and requires mouse hover to display.
<!-- Bad: icon-only button with no name -->
<button>
  <svg viewBox="0 0 24 24"><!-- X icon --></svg>
</button>

<!-- Good: aria-label on icon button -->
<button aria-label="Close">
  <svg viewBox="0 0 24 24"><!-- X icon --></svg>
</button>

<!-- Good: visible text -->
<button>Save changes</button>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources