How to fix buttons with no name in Shopify (cart, menu, quantity)

A button with no name is a control that screen readers announce only as "button", with nothing to say what it does. In Shopify stores this almost always means an icon-only button: the cart icon, the menu toggle, the quantity plus and minus, or the close button on a drawer. A FixRamp scan reports it as "Buttons have no name"; other checkers, such as axe, call it "Buttons must have discernible text". The fix is a short text label that sighted visitors never see.

The short answer

• Give every icon-only button a name, using aria-label or visually hidden text.
• Hide the icon itself from screen readers with aria-hidden="true".
• Use your theme's translation strings so the label is translated with the rest of the store.

Why it matters

WCAG success criterion 4.1.2 Name, Role, Value requires that, for every user interface component, "the name and role can be programmatically determined". A screen reader user who hears "button, button, button" cannot tell the cart from the menu. Voice control users cannot click a button by saying its name either.

Where these buttons hide in Shopify themes

How to fix it

Your developer adds a name to each button. Either of these works:

<!-- Option 1: aria-label -->
<button type="button" class="quantity__button" aria-label="Increase quantity">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Option 2: visually hidden text -->
<button type="button" class="drawer__close">
  <svg aria-hidden="true" focusable="false">…</svg>
  <span class="visually-hidden">Close cart</span>
</button>

In Shopify themes, use a translation string instead of hard-coded English, so French and other languages get a translated label. Theme locale files usually already contain keys for these labels. For example:

<button type="button" aria-label="{{ 'accessibility.close' | t }}">

Check the key exists in your theme's locales/en.default.json before using it.

Links have the same problem

Icon-only links, such as social media icons or a logo link with an unlabeled image, fail a related check: "Links have no text" in a FixRamp scan, or "Links must have discernible text" in axe. The fix is the same: add aria-label, visually hidden text, or alt text on the image inside the link. See our full guide to links with no text in Shopify.

Buttons added by apps

If the unlabeled button comes from an app (wishlist, reviews, chat), you usually cannot edit its code. Report it to the app developer with the exact element, or ask whether a newer version fixes it.

WooCommerce stores

The same fix applies. Header icons, mini-cart buttons and quantity controls often come from the theme or a plugin. Add aria-label in a child theme template override, or ask the plugin developer.

How to check your fix

1. Run a free scan of your homepage and a product page. Look for "Buttons have no name" and "Links have no text". The free scan shows the most serious issues on the page you enter, so an issue may not appear if others rank higher.
2. With a screen reader, press Tab through the header and the product form. Each control should announce what it does.
3. Open the cart drawer and the mobile menu, then check their close buttons too.

Related guides: missing alt text on Shopify and low color contrast in a Shopify theme. A FixRamp report shows how many unnamed controls each page has, grouped by template, with examples and the fix. Using an accessibility widget instead? It does not change these buttons in your theme; see what to use instead of an overlay widget.