Aria progressbar name
Quick winFound on 6% of audited stores.
Add an accessible name (aria-label or aria-labelledby) to every progress bar element so screen readers can announce its purpose.
What it is
A progress bar (any element with role="progressbar", or an HTML `<progress>` element) must have a human-readable name so that assistive technologies like screen readers know what the bar is measuring — for example "Order shipping progress" or "Password strength". Without a name, a screen reader user hears something useless like "progress bar, 60%" with no context about what is progressing. The fix is almost always adding a single HTML attribute — `aria-label` or `aria-labelledby` — directly to the element.
Why it matters
This issue violates WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A) — the lowest, most broadly required accessibility level. Failing Level A criteria creates legal exposure in jurisdictions that mandate web accessibility (including the ADA in the US, EAA in the EU, and AODA in Canada). For an ecommerce store, progress bars typically appear during checkout (multi-step progress), password-strength meters, review ratings, loyalty-point trackers, and shipping status — all high-value, conversion-critical moments. A customer using a screen reader who cannot understand a progress bar at checkout may abandon the purchase entirely. Fixing this is a quick-win code change that reduces legal risk and directly protects conversion rates for the roughly 7 million screen-reader users who shop online.
How to fix it
- Locate every element on your site that acts as a progress bar: HTML `<progress>` tags, any element with role='progressbar', or custom progress-bar components (e.g. review stars rendered as bars, checkout step indicators, password-strength meters).
- For each progress bar, decide on a short, descriptive label that tells users what is being measured (e.g. 'Checkout step progress', 'Password strength', 'Average customer rating').
- If the label text is already visible on the page (e.g. a heading or nearby text), point to it with aria-labelledby='id-of-that-text'. If there is no visible label, add aria-label='Your descriptive label' directly on the progress bar element.
- For native `<progress>` elements, also ensure the element is wrapped in a `<label>` or has an associated `<label for='…'>`, or use aria-label as above — both approaches satisfy the requirement.
- Ensure aria-valuenow, aria-valuemin, and aria-valuemax attributes are also present on role='progressbar' elements so screen readers can announce the current value (e.g. aria-valuenow='60' aria-valuemin='0' aria-valuemax='100').
- Test your fix with a free screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) or re-run an automated accessibility scanner (axe DevTools browser extension) to confirm no aria-progressbar-name violations remain.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria progressbar name on Shopify
- In your Shopify Admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Search across theme files (Ctrl+F in the editor, or use the search icon) for 'progressbar', '<progress', 'role="progressbar"' to locate all instances.
- Common locations: sections/cart.liquid or sections/main-cart-footer.liquid (cart progress bars), snippets/product-reviews.liquid or an app-injected snippet (star-rating bars), checkout.liquid (if on Shopify Plus — for checkout step progress).
- Add aria-label='Descriptive label here' to the opening tag of each progress bar element found. Example: change <div role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100'> to <div role='progressbar' aria-label='Checkout step progress' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100'>.
- If the bar is injected by a third-party app (e.g. a review app or loyalty app), check that app's settings panel for accessibility/label options, or contact the app developer.
- Save the file and verify with the axe DevTools browser extension.
How to fix aria progressbar name on WooCommerce
- Progress bars in WooCommerce most commonly appear in: the checkout multi-step plugin templates, review/rating bars (theme or plugin), password-strength meters (wp-login.php and My Account page), and shipping progress bars.
- For theme-generated bars: in wp-admin go to Appearance → Theme File Editor (or use a child theme). Locate the template file rendering the bar — often woocommerce/templates/single-product/review.php, or a theme partial like template-parts/progress.php.
- Add aria-label='…' directly to the role='progressbar' or <progress> element in that template.
- For the built-in WooCommerce password-strength meter, the element is rendered by the WooCommerce JS. Override it by enqueuing a small JavaScript snippet in your child theme's functions.php that adds the aria-label attribute after DOM ready: document.querySelectorAll('.woocommerce-password-strength').forEach(el => el.setAttribute('aria-label', 'Password strength')).
- For plugin-generated bars (e.g. WooCommerce Checkout Steps, YITH plugins), check the plugin's settings for label options first; if none exist, add the attribute via a JS snippet in Appearance → Customize → Additional CSS/JS or in functions.php.
- Verify with the axe DevTools browser extension.
How to fix aria progressbar name on BigCommerce
- In your BigCommerce Admin, go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
- Search the Stencil theme files for 'progressbar', '<progress', 'role="progressbar"' — common locations include templates/components/products/rating.html, templates/pages/cart.html, and templates/components/account/.
- Add aria-label='Descriptive label' to each progress bar element's opening tag.
- If the bar is in a Handlebars partial, add the label within that partial. Example: <meter class='rating-meter' aria-label='Average product rating' value='{{product.rating}}' min='0' max='5'>.
- For script-injected progress bars (e.g. from a BigCommerce widget or third-party app), add a small JavaScript block in Storefront → Script Manager that targets the element and sets the aria-label attribute.
- Save, preview, and verify with the axe DevTools extension.
How to fix aria progressbar name on Wix
- Open the Wix Editor for your site. Progress bars are typically added as Wix Progress Bar widgets or through custom HTML embed boxes.
- Click the progress bar element on the canvas → click Settings (the gear icon) or the Accessibility panel (if available in your Wix version) — some Wix components expose an 'Accessible Name' or 'ARIA label' field directly in settings.
- If no accessibility field is available, click the progress bar → Add to site / Manage → look for a 'Screen reader text' option.
- For custom HTML progress bars embedded via Add → Embed → HTML iFrame: open the HTML editor and add aria-label='…' directly to the element markup inside the iframe.
- For Wix Stores review-rating bars injected automatically, use the Wix Accessibility Wizard (found in the main Wix Editor menu under Accessibility) — it will flag unlabelled bars and guide you through adding labels.
- Publish your site and verify with the axe DevTools browser extension.
How to fix aria progressbar name on Squarespace
- Progress bars in Squarespace appear mainly in: product review sections (Business/Commerce plans), donation goal trackers, and any progress bars added via Code Blocks.
- For Code Block-based progress bars: go to the page in the Pages panel → click Edit → click the Code Block containing the progress bar → add aria-label='…' to the HTML element.
- For review/rating bars generated by Squarespace's built-in product reviews: these are rendered by Squarespace's own system. Go to Settings → Advanced → Code Injection → Footer and inject a small script: document.querySelectorAll('[role="progressbar"]').forEach(el => { if (!el.getAttribute('aria-label')) el.setAttribute('aria-label', 'Product rating'); });
- For third-party blocks or extensions that render bars, contact the extension developer about adding aria-label support.
- Squarespace does not provide direct template file editing for most users; the Code Injection approach is the recommended path for injecting ARIA attributes into system-generated elements.
- Verify with the axe DevTools browser extension after publishing.
How to fix aria progressbar name on Webflow
- In the Webflow Designer, click the progress bar element (often a styled div with a nested fill div, or a Webflow-native Progress Bar element).
- In the right-hand Settings panel (the gear icon), scroll to the Custom Attributes section.
- Click the '+' button to add a new attribute: set Name to 'aria-label' and Value to your descriptive label (e.g. 'Checkout progress').
- If the bar uses role='progressbar', also add aria-valuemin, aria-valuemax, and aria-valuenow as custom attributes with appropriate numeric values.
- If the progress bar is inside a Symbol (reusable component), open the Symbol and make the edit there so all instances are updated automatically.
- Publish your site and verify with the axe DevTools browser extension.
How to fix aria progressbar name on Adobe Commerce (Magento)
- Progress bars in Adobe Commerce appear in: checkout step progress (Magento_Checkout module), product review rating bars, and password-strength meters.
- For checkout step progress: the template is vendor/magento/module-checkout/view/frontend/templates/progress.phtml (or its override in app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/templates/progress.phtml). Add aria-label='Checkout step progress' to the progress bar element in this file — always use a theme override rather than editing vendor files directly.
- For review/rating bars: override app/design/frontend/<Vendor>/<Theme>/Magento_Review/templates/review.phtml and add aria-label='Customer rating' to the rating bar element.
- For password-strength meters: override the relevant template in Magento_Customer (template: customer/widget/form/element/password.phtml) and add aria-label='Password strength' to the meter/progressbar element.
- Run bin/magento cache:clean and bin/magento setup:static-content:deploy after making template changes.
- Verify with the axe DevTools browser extension.
Does your site have this issue?
Run a free SEOLZ scan to find aria progressbar name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria progressbar name?
A progress bar (any element with role="progressbar", or an HTML `<progress>` element) must have a human-readable name so that assistive technologies like screen readers know what the bar is measuring — for example "Order shipping progress" or "Password strength". Without a name, a screen reader user hears something useless like "progress bar, 60%" with no context about what is progressing. The fix is almost always adding a single HTML attribute — `aria-label` or `aria-labelledby` — directly to the element.
Why does aria progressbar name matter?
This issue violates WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A) — the lowest, most broadly required accessibility level. Failing Level A criteria creates legal exposure in jurisdictions that mandate web accessibility (including the ADA in the US, EAA in the EU, and AODA in Canada). For an ecommerce store, progress bars typically appear during checkout (multi-step progress), password-strength meters, review ratings, loyalty-point trackers, and shipping status — all high-value, conversion-critical moments. A customer using a screen reader who cannot understand a progress bar at checkout may abandon the purchase entirely. Fixing this is a quick-win code change that reduces legal risk and directly protects conversion rates for the roughly 7 million screen-reader users who shop online.
How do I fix aria progressbar name?
Add an accessible name (aria-label or aria-labelledby) to every progress bar element so screen readers can announce its purpose.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN