WCAG A · 2.4.4, 4.1.2Checked on every planEU · US

Links and buttons have no name

Why do icon buttons need a name?

Short answer

So screen reader and voice control users know what they do (WCAG 2.4.4 and 4.1.2). Icon-only controls are the usual miss: cart, account, search, social links and slider arrows.

Why it matters

A screen reader announces a nameless control as just “link” or “button”, so a blind shopper can’t tell the cart from the wishlist. WebAIM’s 2026 study found empty links on 46.3% of a million home pages and empty buttons on 30.6%.

How to fix it

Shopify

  1. Go to Online Store, Themes, then Edit code, and find the snippet for the icon (for example header icons or social icons).
  2. Add hidden text inside the link, such as <span class="visually-hidden">Cart</span>, which Dawn-based themes already style.
  3. Or add aria-label="Cart" to the link or button itself.

WooCommerce

  1. In the block editor, the Social Icons block has a “Label” field for each icon; fill it in.
  2. For theme header icons, add an aria-label in a child theme template, not the parent theme, so updates keep the fix.
  3. Slider and gallery plugins often have an accessibility setting for arrow labels; switch it on.

In the code

  1. Put text inside the link or button, or alt text on the image inside it.
  2. For icon-only controls, add aria-label, for example aria-label="Instagram".

Automated tools find names that are missing, not names that are misleading. A button named “Submit” on a newsletter form passes, even if people need to know it signs them up. Only a person can judge if each name makes sense on its own.

The standard behind this rule