WCAG 4.1.2 — Name, Role, Value

Empty Buttons

What is this issue?

Empty buttons are <button> elements or elements with role="button" that have no accessible name. This occurs when a button contains only an icon (SVG, font icon, or background image) with no text content, no aria-label, no aria-labelledby, and no title attribute. WCAG Success Criterion 4.1.2 (Level A) requires that all user interface components have a programmatically determinable name.

Icon-only buttons are extremely common in modern web design: hamburger menus, close buttons (X), social media icons, action buttons (edit, delete, share), media controls (play, pause), and navigation arrows. When these buttons lack an accessible name, screen readers announce them as simply "button" -- giving the user no indication of what the button does.

The problem is compounded when multiple empty buttons appear on the same page. A card component with edit, delete, and share icon buttons becomes three consecutive announcements of "button", "button", "button". The user has no way to distinguish them and must guess which button performs which action, risking destructive actions like deletion.

Impact on users

For screen reader users, an empty button is a mystery. They know something is interactive, but they have no idea what it does. In a page with multiple empty buttons, the user faces a series of unlabeled controls that could do anything from opening a menu to deleting their account. This creates anxiety and prevents confident interaction.

Voice control users cannot activate empty buttons because there is no label to speak. "Click button" is ambiguous when there are multiple buttons. The user must use numeric overlays or spatial commands, which are much slower and less reliable than simply speaking the button's label.

Empty buttons also fail automated accessibility testing tools, making them one of the easiest issues to detect but also one of the most commonly overlooked. The fix is trivial -- a single aria-label attribute -- but the impact of the omission is severe.

Code example

Before (non-compliant)

<!-- Icon button with no accessible name -->
<button class="icon-btn">
  <svg viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>

<!-- Font icon button with no name -->
<button><i class="fa fa-trash"></i></button>

<!-- Close button with only visual X -->
<button class="close">&times;</button>

<!-- Image button with no alt or label -->
<button>
  <img src="/icons/search.svg">
</button>

After (compliant)

<!-- Icon button with aria-label -->
<button class="icon-btn" aria-label="Open menu">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
</button>

<!-- Font icon with label -->
<button aria-label="Delete item">
  <i class="fa fa-trash" aria-hidden="true"></i>
</button>

<!-- Close button with descriptive label -->
<button class="close" aria-label="Close dialog">
  <span aria-hidden="true">&times;</span>
</button>

<!-- Image button with alt text -->
<button>
  <img src="/icons/search.svg" alt="Search">
</button>

How Scrutia detects this issue

Scrutia computes the accessible name of every button and element with role="button" on your pages. Buttons with an empty or missing accessible name are flagged. The report identifies the button's visual content (icon type, class names) and suggests an appropriate aria-label based on the icon's apparent purpose and surrounding context.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

Should I use aria-label or visually hidden text?

Both are valid. aria-label is more concise and directly sets the accessible name. Visually hidden text (sr-only class) is part of the DOM and may be more maintainable for translation. Choose whichever works best for your workflow, but ensure one is always present.

Should the SVG inside a button have aria-hidden?

Yes. When a button has an aria-label, the SVG icon inside it is decorative and should have aria-hidden="true" to prevent screen readers from attempting to announce the SVG content (which is often meaningless path data).

What about the title attribute?

While the title attribute can provide an accessible name, it is not recommended as the primary method. Title tooltips are not visible on touch devices, not announced consistently by all screen readers, and require a mouse hover to display. Use aria-label instead.

Does your site have this issue?

Scrutia scans your pages against WCAG success criteria and delivers actionable fixes. Results in 5 minutes.

Run a free audit