WCAG A/AA requirement Priority: Moderate
Some gauges have no name
Some elements marked as a meter (a gauge showing a value in a range, such as password strength, stock level or a rating) have no text that says what they measure.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users hear only a value such as "60%" without knowing whether it is password strength, remaining stock or a rating, and may miss information they need to decide.
Who is affected
- blind customers
- screen reader users
How to fix it
Give every element with role="meter" a name: aria-label (for example aria-label="Password strength") or aria-labelledby pointing to a visible heading or label. Also give it a readable value with aria-valuetext where the number alone is unclear.
On Shopify
Uncommon. Usually a stock-level, rating or progress widget from an app or custom theme section. Add a label in the theme's Liquid or ask the app developer.
On Shoptet (CZ)
Rare in Shoptet templates. If it appears, report it to Shoptet or a Shoptet partner.
On PrestaShop
Uncommon. Usually a module widget such as stock level or ratings. Add aria-label in the module's overridden template.
On WooCommerce
Uncommon. Usually a password-strength, rating or stock widget from the theme or a plugin. Add a label in a child theme or report it to the plugin author.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Automated check: axe-core rule aria-meter-name.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Accessibility attributes are used in the wrong situation
WCAG 4.1.2 A
-
A dropdown has no label
WCAG 4.1.2 A
-
Large tables have cells without headers
WCAG 1.3.1 A
-
Some text scrolls and cannot be stopped
WCAG 2.2.2 A