WCAG A/AA requirement Priority: Moderate
Some progress bars have no name
Some elements marked as a progress bar have no text that says what they show, for example "spend €20 more for free shipping", checkout steps or a loading indicator.
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 "progress bar, 60%" and do not know whether it is the free-shipping threshold, the checkout step or a page still loading. They may miss an offer or wait without knowing why.
Who is affected
- blind customers
- screen reader users
How to fix it
Give every element with role="progressbar" a name: aria-label (for example aria-label="Progress to free shipping") or aria-labelledby pointing to the visible text next to it. Where useful, add aria-valuetext with a readable value such as "€20 left".
On Shopify
Usually a free-shipping bar, upsell or cart app, or a loading indicator in the theme. Ask the app developer to add a label or add aria-label in the theme's Liquid snippet.
On Shoptet (CZ)
Usually a free-shipping indicator or loading element in the template or an add-on. Report it to Shoptet or a Shoptet partner.
On PrestaShop
Usually a free-shipping, checkout or loading module. Add aria-label in the overridden module template or report it to the module developer.
On WooCommerce
Usually a free-shipping bar, checkout-steps or upload plugin, or the page builder's progress widget. Fill in the widget's label setting if there is one, otherwise fix it 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-progressbar-name.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Embedded content has no name
WCAG 4.1.2 A
-
The page reloads or redirects by itself
WCAG 2.2.1 A
-
Images have no text description
WCAG 1.1.1 A
-
Some vector graphics have no text description
WCAG 1.1.1 A