When a button lacks an accessible name, screen readers announce it simply as "button" with no indication of what it does. Users must guess whether it submits a form, opens a menu, or deletes their data.

What's Happening

Lighthouse flags <button> elements and elements with role="button" that have no discernible text. The audit checks for visible text content, aria-label, aria-labelledby, or title attributes. Buttons containing only icons, images without alt text, or empty content will fail this audit.

Diagnose

1. Open DevTools and run Lighthouse accessibility audit
2. Expand "Buttons do not have an accessible name"
3. Click each flagged button to locate it in the DOM
4. Check the Elements panel for inner text, aria-label, or child elements with text
5. Open the Accessibility tab to view the computed accessible name (should not be empty)

Fix

1. Add Visible Button Text

The most straightforward fix is visible text that describes the action.

<!-- Before: empty button -->
<button onclick="submitForm()"></button>

<!-- After: descriptive text -->
<button onclick="submitForm()">Submit application</button>

<!-- Before: button with only whitespace -->
<button type="submit">   </button>

<!-- After: meaningful text -->
<button type="submit">Save changes</button>

2. Add aria-label for Icon Buttons

When design requires icon-only buttons, provide an accessible name.

<!-- Before: icon button with no name -->
<button class="close-btn">
  <svg class="icon-x">...</svg>
</button>

<!-- After: aria-label names the action -->
<button class="close-btn" aria-label="Close dialog">
  <svg class="icon-x" aria-hidden="true">...</svg>
</button>

<!-- Menu toggle button -->
<button aria-label="Open navigation menu" aria-expanded="false">
  <svg aria-hidden="true"><!-- hamburger icon --></svg>
</button>

3. Use Visually Hidden Text

Include full text for screen readers while showing only an icon visually.

<button type="button">
  <svg aria-hidden="true"><!-- trash icon --></svg>
  <span class="sr-only">Delete item</span>
</button>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

4. Add Alt Text to Image Buttons

When a button contains an image, the alt text provides the name.

<!-- Before: image button without alt -->
<button type="submit">
  <img src="/icons/search.png">
</button>

<!-- After: alt describes the action -->
<button type="submit">
  <img src="/icons/search.png" alt="Search">
</button>

Framework Examples

<!-- Icon-only button with accessible name -->
<UButton
  icon="i-heroicons-trash"
  color="red"
  variant="ghost"
  aria-label="Delete item"
  @click="deleteItem"
/>

<!-- Button with visible label (automatically accessible) -->
<UButton
  label="Save changes"
  @click="save"
/>

Verify the Fix

1. Re-run Lighthouse and confirm the audit passes
2. Tab to each button and verify your screen reader announces a meaningful name
3. Check the Accessibility tab in DevTools shows a computed name
4. Test that dynamic buttons (loaded via JavaScript) also have accessible names

Common Mistakes

• Using only title attribute — While title can provide an accessible name, it's not reliably announced by all screen readers and only shows on hover
• Adding aria-label that doesn't match visible text — For buttons with visible text, the aria-label overrides it, potentially confusing sighted screen reader users
• Describing the icon instead of the action — "X icon" or "hamburger icon" doesn't tell users what happens; use "Close" or "Open menu"
• Forgetting dynamically rendered buttons — Modal close buttons, carousel controls, and other JavaScript-inserted buttons need accessible names too
• Using generic names — "Button" or "Submit" aren't helpful; be specific like "Submit contact form" or "Add to cart"

Related Issues

Button name issues often appear alongside:

• Link Name — Same pattern for anchor elements
• Image Alt — Icon images inside buttons need alt or aria-label
• Form Labels — Submit buttons and form controls both need names

Test Your Entire Site

Icon buttons often repeat in headers, toolbars, cards, and interactive components throughout your site. Unlighthouse scans every page automatically, finding all buttons lacking accessible names so you can address them comprehensively rather than discovering them one complaint at a time.

Related

• All Accessibility Issues
• Accessibility Overview