How to fix aria progressbar name on Squarespace

Steps for Squarespace

1. Progress bars in Squarespace appear mainly in: product review sections (Business/Commerce plans), donation goal trackers, and any progress bars added via Code Blocks.
2. 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.
3. 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'); });
4. For third-party blocks or extensions that render bars, contact the extension developer about adding aria-label support.
5. 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.
6. Verify with the axe DevTools browser extension after publishing.

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.