How to fix button name on Shopify

Steps for Shopify

1. From your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. In the Layout / Sections / Snippets folders, open the file that contains the offending button (common culprits: header.liquid, cart-icon.liquid, product-form.liquid, icon-*.liquid snippets).
3. Locate the <button> tag. If it only contains an icon, add aria-label="Descriptive name" directly on the opening tag, e.g. <button type="button" aria-label="Open cart">.
4. If the button uses an inline SVG, add aria-hidden="true" focusable="false" to the <svg> tag so screen readers ignore the graphic and read the button's aria-label instead.
5. Alternatively, add a visually-hidden <span class="visually-hidden">Open cart</span> inside the button — Shopify's default themes already ship a .visually-hidden CSS class you can reuse.
6. Click Save, then preview in a browser and verify with the axe DevTools extension or Chrome's Accessibility panel.

<!-- ✅ 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>

What is button name?

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.

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.

See the complete Button name guide for every platform and the full background.