- Success Criterion 2.5.3
- Conformance level A
Translated ARIA Label That Doesn’t Match the Visible Language
2.5.3 — Label in Name
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Translated/localized aria-label while visible label is another language.
Example
Try this on an online clothing store's product listing page: translated/localized aria-label while visible label is another language.
Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text. On an online clothing store's product listing page, that means they can't tell what's going on without extra effort.
How to test
Check the aria-label's language against the visible label's language: a translated aria-label on an untranslated visible label (or vice versa) fails.
How to fix
The accessible name must contain the exact visible label text.
Outcome
With the fix in place on an online clothing store's product listing page, they navigate the content in a sensible order, specifically for the “Translated ARIA Label That Doesn't Match the Visible Language” issue on an online clothing store's product listing page.
Who is affected
Voice-control users and screen-reader users who depend on spoken names matching visible text.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Accessible Name That Doesn’t Match the Control’s Visible Label
- Visible Label Text With No Accessible Name Behind It
- ARIA Label Naming a Completely Different Action Than Shown
- Accessible Name Built From an Icon Instead of Visible Text
- Visible Label Text Reordered or Broken Apart in the Name
- ARIA Reference Pointing to the Wrong Element for a Name