WCAG 4.1.2 (A)
Buttons have no accessible name
What this failure is
A button needs a name that describes what it does. Most buttons get their name from their visible text — "Add to cart", "Search", "Subscribe" — and that works for everyone. The problem starts with icon-only buttons: the little magnifying-glass search button, the hamburger menu, the cart icon in the header, the close-X on a popup. If those contain only an SVG or a font-icon character with no text, and no aria-label, screen readers announce just "button" and the user has no idea what will happen if they press it. Sighted users work it out from the icon shape; screen reader users cannot.
Reference: WCAG 4.1.2 (A) — the authoritative spec.
Who it affects
- Screen reader users: The header of a typical shop has five to eight icon buttons (menu, search, account, wishlist, cart, language, currency); all announced as "button, button, button" means the user cannot navigate the site at all.
- Voice-control users: "Click search" fails when the search button has no accessible name; the user has to say "click 47" using a numbered overlay, which is slow and error-prone.
- Switch device users: Users who navigate by scanning need each control announced clearly to decide whether to activate it; a row of unnamed buttons stops navigation cold.
- Users of translation tools: Chrome's translate feature translates text nodes and aria-label values; an icon button with no accessible name stays untranslated even when the rest of the page becomes readable in Spanish or Arabic.
How to fix it
Concrete steps for the four platforms most small e-commerce sites run on. If you use a different stack, the underlying HTML change is the same.
Shopify
Most modern Shopify themes (Dawn and its children) already label icon buttons. If your theme is older or a heavy custom build, open Online Store > Themes > Edit code and search for <button in the header and product-form snippets. For each icon-only button add aria-label="Search" (or "Open menu", "View cart", etc). If the button contains an SVG, adding <span class="visually-hidden">Search</span> inside the button gives the same result and is preferred by many theme developers because it survives translation via Shopify's locale files.
WooCommerce
The header cart and search icons come from your active theme, not from WooCommerce core. Storefront, Astra and Blocksy all label these correctly; problems usually appear in premium ThemeForest themes. Open Appearance > Theme File Editor, find header.php or template-parts/header/site-header.php, and add aria-label to each icon <button> or <a>. If you are using a page builder header, most builders have an Accessibility panel on the button widget with an ARIA Label field.
Wix
Click the icon or button in the editor, open Settings, and look for the Accessibility section (in some element types it is behind a small "A" icon). Fill in the ARIA label field with a plain-English description of what pressing the button does. For icon buttons added via the Wix App Market, the accessible name is controlled by the app; if the app does not expose an ARIA field, either replace it with a native Wix button plus icon, or contact the app developer.
Squarespace
Squarespace's built-in header icons (search, cart, account) are labelled by the platform and rarely trigger this finding. If your scanner flags icon buttons, they usually come from a custom code block or an injected third-party widget. For a code block, add aria-label to each <button>. Squarespace does not let you rewrite the built-in header markup without heavy JavaScript workarounds, so if a Squarespace-generated button lacks a name, report it to Squarespace support rather than patching over it.
Notes
aria-label should be a short, plain description of the action — "Close dialog", not "X". If the button already has visible text, do not add an aria-label that repeats it; the aria-label overrides the visible text for screen readers, so a mismatch confuses voice-control users who say what they see.
Check your own site
Our accessibility statement scan is free and reports findings only — we do not certify sites.