How to fix aria progressbar name on BigCommerce
Add an accessible name (aria-label or aria-labelledby) to every progress bar element so screen readers can announce its purpose.
Steps for 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.
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 BigCommerce 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