WCAG A/AA requirement Priority: Moderate · experimental check: may need a manual look
Buttons have a hidden name that differs from their visible text
Some buttons or links show one text on screen but carry a different hidden name (aria-label) that does not contain the visible words, for example a button that says "Buy now" but is named "Submit".
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
People who control their device by voice say what they see: "click Buy now". If the hidden name is different, the command does nothing and they get stuck. Screen reader users who can partly see the screen also hear words that do not match, which is confusing.
Who is affected
- voice control users
- people with motor disabilities who cannot use a mouse
- screen reader users with partial sight
- people with cognitive disabilities
How to fix it
Make the accessible name contain the visible text, ideally at the start and in the same order. Often the simplest fix is to remove the aria-label so the visible text becomes the name. If you need extra context, add it after the visible words: visible "Add to cart" becomes aria-label "Add to cart: Blue T-shirt". Check translated pages too: an aria-label left in English on a German page also fails.
On Shopify
Usually aria-label attributes in theme snippets (product cards, cart buttons) or in apps. Edit the Liquid snippet so the aria-label contains the visible text, or remove it, and make sure the theme's translations cover these labels.
On Shoptet (CZ)
Usually in the template's markup, which you can change only partly. Report it to Shoptet support; in your own HTML blocks, remove the aria-label or make it match the visible text.
On PrestaShop
Usually in the theme's .tpl templates or in modules. Change the aria-label in the template so it contains the visible text, and check its translations in the theme's translation settings.
On WooCommerce
Usually in theme templates or plugins that add aria-label to Add to cart buttons and links. Override the template in a child theme or ask the plugin developer, and check that translations cover the aria-label texts.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 2.5.3 (A) Label in Name |
| WCAG 2.1 | 2.5.3 (A) Label in Name |
| EN 301 549 4.1.1 | 9.2.5.3 |
| EN 301 549 3.2.1 | 9.2.5.3 |
| ДСТУ EN 301 549 2022 | 9.2.5.3 |
Automated check: axe-core rule label-content-name-mismatch.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Links in text look like normal text
WCAG 1.4.1 A
-
A label-and-value list is built incorrectly
WCAG 1.3.1 A
-
A dropdown has no label
WCAG 4.1.2 A
-
Buttons have a hidden name that differs from their visible text
WCAG 2.5.3 A