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?
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
- Go to Online Store, Themes, then Edit code, and find the snippet for the icon (for example header icons or social icons).
- Add hidden text inside the link, such as <span class="visually-hidden">Cart</span>, which Dawn-based themes already style.
- Or add aria-label="Cart" to the link or button itself.
WooCommerce
- In the block editor, the Social Icons block has a “Label” field for each icon; fill it in.
- For theme header icons, add an aria-label in a child theme template, not the parent theme, so updates keep the fix.
- Slider and gallery plugins often have an accessibility setting for arrow labels; switch it on.
In the code
- Put text inside the link or button, or alt text on the image inside it.
- 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
A plain summary, not legal advice.