How to fix aria progressbar name on Shopify
Add an accessible name (aria-label or aria-labelledby) to every progress bar element so screen readers can announce its purpose.
Steps for 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.
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.
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.
See the complete Aria progressbar name guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ scan — we’ll find aria progressbar name and every other issue across your whole site.
Scan my site free