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