Rule ID: ace-form-button-name

Verify all button elements have accessible text content for assistive technologies

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Deafblind Legal Risk

What This Rule Checks

Buttons and elements with role=”button” must have an accessible name so that users of assistive technologies, like screen readers, can understand their purpose. The accessible name can be provided using inner text, an aria-label, or by referencing another element with aria-labelledby.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.

Why This Matters

Buttons without accessible names are announced as simply “button” by screen readers. Users cannot determine what the button does without activating it. This is one of the most frequently cited WCAG violations in accessibility lawsuits.

How to Fix

Use Inner Text for Button Labels

The simplest way to give a button a discernible name is by using inner text. The text inside the <button> element will be announced by screen readers.

Use aria-label or aria-labelledby for Custom Buttons

For buttons that don’t have visible text, use aria-label or aria-labelledby to provide a hidden name that can be announced by screen readers.

Avoid Empty Labels or Misconfigured Attributes

Make sure attributes like aria-label or aria-labelledby are correctly configured. Do not leave these attributes empty or pointing to non-existent elements, as this will render the button inaccessible.

Use the title Attribute for Tooltips

You can use the title attribute to provide an accessible name that will show as a tooltip when users hover over the button. This can also be read by screen readers.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Empty button -->
<button></button>

<!-- Icon button with no accessible name -->
<button>
  <i class="fa fa-search"></i>
</button>

<!-- Button with only whitespace -->
<button>   </button>

Copy

Correct Markup Solutions:

Code example

<!-- Button with visible text -->
<button>Search Products</button>

<!-- Icon button with aria-label -->
<button aria-label="Search">
  <i class="fa fa-search" aria-hidden="true"></i>
</button>

<!-- Button with visually hidden text -->
<button>
  <i class="fa fa-trash" aria-hidden="true"></i>
  <span class="sr-only">Delete item</span>
</button>

Copy

Common Mistakes to Avoid

Creating icon-only buttons without aria-label or visually hidden text.
Using title attribute as the only accessible name (inconsistent screen reader support).
Including only an image inside a button without alt text.
Using generic names like “Click” or “Go” that don’t describe the action.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.

Related WCAG Criteria

4.1.2: Name, Role, Value