Button name

What it is

Every button on your store — including icon-only buttons like a cart icon, search magnifying glass, hamburger menu, or social share button — must have a text name that screen readers can read aloud. When a button contains only an image or an icon font (e.g. a heart symbol or an arrow), there is no visible text for assistive technology to announce, so blind and low-vision users hear something useless like "button" with no description. WCAG Success Criterion 4.1.2 requires all interactive controls to have an accessible name. This name can be visible text inside the button, an `aria-label` attribute, an `aria-labelledby` reference, or a visually-hidden text element — the screen reader just needs something meaningful to say.

Why it matters

Roughly 7–8% of online shoppers use assistive technology, and an unnamed button is a complete dead-end for them — they cannot add to cart, open the menu, or complete checkout if those buttons have no accessible name. Beyond lost conversions, this is a WCAG 2.1 Level A violation (the lowest, most-required level), meaning it exposes your store to legal complaints and ADA/Section 508 accessibility lawsuits, which have been rising sharply in ecommerce. Google's crawlers also parse ARIA labels and button text as page signals; cleaner, descriptive buttons contribute to better crawlability and can positively influence rankings. Fixing unnamed buttons is typically a quick, high-impact change that simultaneously removes legal risk, improves conversion for disabled users, and makes your site more professional.

How to fix it

1. Identify every button that lacks visible text — look for icon-only buttons (cart, search, close ✕, hamburger ☰, arrows, social icons, play/pause) in your theme's HTML.
2. For each button, choose the best accessible-name method: (a) add visible text inside the button tag, (b) add an aria-label attribute directly on the button element with a short descriptive label (e.g. aria-label="Add to cart"), (c) add a visually-hidden <span> inside the button (styled with a CSS class that positions text off-screen but keeps it in the accessibility tree), or (d) use aria-labelledby pointing to an existing descriptive element's id.
3. Prefer visible text whenever the design allows it — this benefits all users, not just screen-reader users. Use aria-label only when adding visible text would break the visual design.
4. If the button contains a meaningful <img>, make sure that img has a descriptive alt attribute; if it contains an SVG icon, add aria-hidden="true" to the SVG and place the label on the button itself.
5. After editing, validate with a free browser tool (axe DevTools Chrome extension, or WAVE) by inspecting the button — confirm the Accessibility panel shows a non-empty 'Accessible Name'.
6. Test with an actual screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) to confirm the button is announced with a meaningful label before shipping.

<!-- ✅ Option 1: Visible text (best) -->
<button type="button">Add to cart</button>

<!-- ✅ Option 2: aria-label on an icon-only button -->
<button type="button" aria-label="Open search">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- ✅ Option 3: Visually-hidden span (text in DOM, hidden visually) -->
<style>
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>
<button type="button">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Open cart</span>
</button>

<!-- ❌ Broken: icon font with no label -->
<button type="button"><i class="icon-cart"></i></button>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Web accessibility tutorials — W3C WAI
• ARIA basics — MDN