FeaturesPricingAudit GuideFree StatementDashboard →

Ensure All Buttons Have Accessible Names

Learn how to ensure all buttons have descriptive, accessible names. Includes code examples.

6 min read
serious severityWCAG Level AWCAG 2.1 Success Criterion 4.1.2Manual review needed

What Is It?

A button's accessible name is the text announced by screen readers. Sources (in priority order): visible text content, aria-label, aria-labelledby, title attribute. At least one must exist.

Affected users: Screen reader users, users with motor disabilities, voice control users, users on mobile without seeing icons

Why It Matters

Buttons without names (icon-only buttons, buttons with no text) are announced as 'button' with no description. Users don't know what clicking does.

How to Detect This Issue

Test with screen reader. Navigate to all buttons and verify each has a meaningful name announced. Inspect element and check for text content, aria-label, or title.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<button><svg>...</svg></button> <!-- icon-only, no name -->
After (accessible)
<button aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>

Icon-only buttons need aria-label. aria-hidden on SVG prevents double announcement. Visible text is preferable: <button><i></i> Close</button>

React / Next.js

Before
<button onClick={search}><SearchIcon /></button>
After
<button onClick={search} aria-label="Search articles"><SearchIcon aria-hidden="true" /> <span className="sr-only">Search</span></button>

Option 1: aria-label="Search articles". Option 2: visible text in sr-only span. Option 3: visible text without span. Don't combine (redundancy).

WordPress

Before
Sidebar widget with close button icon, no text or aria-label
After
Close button with visible text "Close" or aria-label="Close sidebar"

WordPress: ensure buttons in widgets, menus, sidebars have accessible names via HTML or ARIA.

Shopify Liquid

Before
Shopping cart icon button with no label
After
<button aria-label="Shopping cart, 3 items"><CartIcon /></button>

Shopify: icon buttons (cart, menu, search) need clear aria-labels. For cart, include item count.

Common Mistakes

✗

Icon-only buttons without aria-label or visible text

✗

aria-label that matches visible text exactly (redundant)

✗

Forgetting that aria-label on parent button applies to button, not separate spans

✗

Using title attribute alone for button names (not reliable for keyboard users)

✗

Buttons with only placeholder text or invisible text

Frequently Asked Questions

What's the best way to name icon buttons?
Visible text is best: <button>Search</button>. If space is tight, use aria-label: <button aria-label="Search"><SearchIcon /></button>
Is title attribute enough for button names?
No. title works for sighted users on hover, but screen readers don't always read it. Use aria-label or visible text instead.
Can I use aria-label on <a> elements?
Yes. <a> tags need names too. <a href="/about" aria-label="Learn about our company"><i class="icon"></i></a>
What if button text is too long visually?
Use aria-label with shorter text: <button aria-label="Send email"><i></i> ✉</button> OR use sr-only span with full text.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides