Buttons Do Not Have an Accessible Name: Why This Accessibility Error Happens and How to Fix It

This issue is usually small in markup, but large in impact on accessibility and keyboard usability.

What an Accessible Button Name Is

An accessible name is the text that assistive technologies use to describe a button. It tells users what will happen when the button is activated.

An accessible name can come from:

• Visible text inside the button
• The aria-label attribute
• The aria-labelledby attribute

If none of these are present, the button is considered unnamed.

Why This Error Is So Common

This issue is largely driven by modern UI patterns and development practices.

• Icon-only buttons without visible text
• Buttons that contain only SVG elements
• Using <div> or <span> as fake buttons
• Framework abstractions hiding native HTML behavior

Icons may be visually obvious, but assistive technologies cannot interpret them without text.

Where Unnamed Buttons Commonly Appear

• Search, close, and menu buttons
• Icon actions in data tables
• Media player controls
• Custom dropdowns and sliders
• JavaScript-generated UI controls

Common Incorrect Example

<button>
  <svg></svg>
</button>

This button has no accessible name for screen readers.

Correct and Accessible Examples

The best solution is to use visible text:

<button>Search</button>

If the design requires an icon-only button:

<button aria-label="Search">
  <svg></svg>
</button>

This preserves the visual design while making the button understandable.

Avoid Using Divs as Buttons

A common anti-pattern is using a <div> as a button:

<div onclick="submitForm()">
  Submit
</div>

This approach creates multiple accessibility problems, including missing semantics, keyboard issues, and inconsistent behavior.

The correct alternative is:

<button type="button">Submit</button>

Mistakes to Avoid

• Icon-only buttons without accessible labels
• Using vague labels like “button” or “action”
• Overusing role="button" instead of native elements
• Choosing non-semantic elements for styling reasons

Impact on Accessibility

When buttons lack accessible names:

• Screen reader users cannot understand available actions
• Keyboard navigation becomes inefficient
• The interface feels unpredictable and confusing
• Accessibility audit scores decrease significantly

Benefits of Fixing Accessible Button Names

Ensuring every button has a clear name leads to immediate improvements:

• Clear and consistent screen reader announcements
• Improved usability for all users
• Cleaner and more semantic HTML
• Better compliance with accessibility standards

Conclusion

The Buttons do not have an accessible name error highlights a gap between visual design and semantic meaning. By using native <button> elements and providing clear text or ARIA labels, you eliminate this issue and significantly improve the accessibility and usability of your website.