SEOLZ

Aria progressbar name

Quick win

Found on 1% of audited stores.

Add a descriptive accessible name to every progress bar element so screen readers can announce what it represents.

What it is

A progress bar (any HTML element with `role="progressbar"`, including native `<progress>` elements) must have an accessible name — a short label that tells users *what* is progressing. This name is provided via an `aria-label` attribute directly on the element, or by pointing to a visible label using `aria-labelledby`. When neither exists, the progress bar is completely anonymous: assistive technologies announce it as just "progress bar, 0%" with no context about what is being tracked — a password strength meter, a checkout step, a file upload, etc.

Why it matters

Screen reader users — including customers who are blind or have low vision — rely on accessible names to understand your store's interface. An unnamed progress bar during checkout, a file upload, or a product review form creates confusion and can cause those shoppers to abandon the task entirely, costing you sales and harming your brand reputation. Failing to provide accessible names for interactive or informative widgets violates WCAG 2.1 Success Criterion 1.1.1 (Non-text Content) and 4.1.2 (Name, Role, Value), exposing your store to accessibility complaints and potential legal liability in many jurisdictions (e.g., ADA in the US, EN 301 549 in the EU). Fixing it is a quick code change with zero impact on visual design.

How to fix it

  1. Identify every element on your store that visually looks like a progress bar — checkout step indicators, upload progress, password-strength meters, loyalty point bars, quiz progress, etc.
  2. Inspect the HTML source of each: look for `<progress>`, or any `<div>`, `<span>`, or other element with `role="progressbar"`.
  3. If there is a visible text label near the bar (e.g., 'Order Progress'), add `aria-labelledby="id-of-that-label"` to the progress bar element, giving the label element a matching `id`.
  4. If there is no visible label, add `aria-label="[descriptive name]"` directly to the progress bar element — e.g., `aria-label="Password strength"` or `aria-label="Checkout progress: step 2 of 4"`.
  5. Also confirm `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes are present and accurate so screen readers can announce the current value alongside the label.
  6. Test the fix using a screen reader (NVDA + Firefox, JAWS + Chrome, or VoiceOver on macOS/iOS) or the browser's Accessibility tab in DevTools to confirm the bar is announced with a meaningful name and value.
<!-- OPTION A: aria-label (no visible label nearby) -->
<div
  role="progressbar"
  aria-label="Password strength"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
  style="width:60%;"
></div>

<!-- OPTION B: aria-labelledby (visible label exists) -->
<p id="upload-label">File upload progress</p>
<div
  role="progressbar"
  aria-labelledby="upload-label"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  style="width:40%;"
></div>

<!-- OPTION C: native <progress> with <label> -->
<label for="checkout-progress">Checkout: step 2 of 4</label>
<progress id="checkout-progress" value="50" max="100">50%</progress>

Fix it on your platform

Pick your platform for the exact steps.

How to fix aria progressbar name on Shopify
  1. In your Shopify admin go to Online Store → Themes → your active theme → Edit code.
  2. Search across template files (Sections, Snippets, Layout) for `role="progressbar"`, `<progress`, or any progress/strength widget JavaScript file in Assets.
  3. Open the relevant `.liquid` file or `.js` asset. For a Liquid-rendered bar, add `aria-label="{{ label_variable }}"` or `aria-labelledby` directly to the element tag.
  4. For third-party app widgets (e.g., a password-strength meter from a login app), check the app's settings panel for an accessibility label option; if none, contact the app developer or inject the attribute via a small JavaScript snippet added to theme.liquid before `</body>`: `document.querySelectorAll('[role="progressbar"]:not([aria-label]):not([aria-labelledby])').forEach(el => el.setAttribute('aria-label', 'Progress'));` — then replace the generic string with a context-specific label per selector.
  5. Save and preview. Use Chrome DevTools → Accessibility panel to confirm the computed accessible name is populated.
Full Shopify guide →Official Shopify docs ↗
How to fix aria progressbar name on WooCommerce
  1. Progress bars in WooCommerce typically come from the active theme or plugins (e.g., a checkout-steps plugin, password-strength meter from woocommerce-password-strength-meter.js, or a loyalty plugin).
  2. For theme-rendered bars: in your WordPress admin go to Appearance → Theme File Editor (or edit via FTP/SSH) and open the relevant template partial (e.g., `form-login.php`, `checkout/form-checkout.php`). Add `aria-label="…"` to the element.
  3. For WooCommerce's built-in password strength meter (rendered by `woocommerce/assets/js/frontend/password-strength-meter.js`): add a filter in your child theme's `functions.php` or a custom plugin to enqueue a small JS snippet that sets `aria-label` on `#password-strength` after DOM-ready.
  4. For plugin-generated bars, check the plugin's settings for an accessibility field; if absent, add the attribute via a targeted JS snippet in your child theme's `functions.php` using `wp_add_inline_script`.
  5. Clear any caching plugins (e.g., WP Rocket, W3 Total Cache) and validate with the axe DevTools browser extension.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix aria progressbar name on BigCommerce
  1. In your BigCommerce admin go to Storefront → My Themes → your active theme → Edit Theme Files (or download via Stencil CLI).
  2. Search template files (`.html` Handlebars partials under `templates/`) and JavaScript files (`assets/js/`) for `role="progressbar"` or `<progress`.
  3. Edit the relevant template or JS file to add `aria-label="…"` or `aria-labelledby` to the element. Stencil Handlebars partials support standard HTML attributes — just add them inline.
  4. If the progress bar is injected by a third-party script (e.g., a page-builder widget), add a JavaScript snippet via Storefront → Script Manager that targets the element and sets the attribute after page load.
  5. Push the changes via Stencil CLI (`stencil push`) or save in the theme editor, then verify using browser DevTools Accessibility tab.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix aria progressbar name on Wix
  1. Wix's standard progress bar widget can be configured in the Wix Editor: click the progress bar element → Settings panel — look for a 'Accessible label' or 'Title' field and enter a descriptive name.
  2. If no label field is exposed in Settings, switch to Wix Editor → click the element → Accessibility Settings (the person icon in the element toolbar) and enter a label.
  3. For progress bars added via Wix Velo (custom code), open your site's code (Dev Mode) and set the `accessibility.ariaLabel` property: `$w('#progressBar1').accessibility.ariaLabel = 'Password strength';`
  4. For third-party Wix App Market apps rendering progress bars, contact the app developer to request an `aria-label` option, or use Velo to query the rendered DOM and patch the attribute.
  5. Publish the site and test with a screen reader or the Wix Accessibility Wizard.
Full Wix guide →Official Wix docs ↗
How to fix aria progressbar name on Squarespace
  1. Squarespace does not expose direct HTML editing for most blocks. First check if the progress bar block (e.g., a Chart or Progress Bar block) has an accessible title field in its block settings — click the block → Edit → look for a Title or Accessible Name field.
  2. If not available, go to Website → Pages → the page containing the bar → Page Settings → Advanced → Page Header Code Injection and add a JavaScript snippet that runs after load: `document.querySelectorAll('[role="progressbar"]').forEach(el => { if (!el.getAttribute('aria-label')) el.setAttribute('aria-label', 'YOUR DESCRIPTIVE LABEL'); });`
  3. Alternatively use Settings → Advanced → Code Injection (site-wide footer) for a global fix across all pages.
  4. For Squarespace Commerce order/checkout progress indicators, the same footer injection approach applies — target the specific element with a CSS selector for precision.
  5. Save and test using browser DevTools Accessibility panel.
Full Squarespace guide →Official Squarespace docs ↗
How to fix aria progressbar name on Webflow
  1. In the Webflow Designer, click the progress bar element (a `<progress>` tag or a div with `role="progressbar"`) to select it.
  2. Open the Element Settings panel (the gear icon) → Custom Attributes section.
  3. Add a new attribute: Name = `aria-label`, Value = your descriptive text (e.g., `Password strength`). Or add `aria-labelledby` pointing to the ID of a nearby visible label element.
  4. Also add `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes here if they are not already present.
  5. If the bar is controlled by a CMS collection, use a CMS field reference in the attribute value so the label is dynamic.
  6. Publish the site and verify in Chrome DevTools → Accessibility tab.
Full Webflow guide →Official Webflow docs ↗
How to fix aria progressbar name on Adobe Commerce (Magento)
  1. Locate the template file that renders the progress bar. Common locations: `app/design/frontend/<Vendor>/<theme>/Magento_Checkout/templates/progress-bar.phtml` (checkout steps), or a custom module template.
  2. Open the `.phtml` file and add `aria-label="<?= $escaper->escapeHtmlAttr(__('Checkout progress')) ?>"` (or `aria-labelledby`) to the element tag. Use Magento's `__()` translation function so the label is translatable.
  3. For the password-strength meter (`Magento_Customer` module), override `app/design/frontend/<Vendor>/<theme>/Magento_Customer/templates/widget/password/strength_indicator.phtml` in your custom theme and add the `aria-label` attribute.
  4. Run `bin/magento setup:static-content:deploy` and `bin/magento cache:flush` after saving template changes.
  5. Verify in the browser Accessibility panel and with an automated scan (e.g., axe DevTools extension).
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find aria progressbar name — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Aria progressbar name?

A progress bar (any HTML element with `role="progressbar"`, including native `<progress>` elements) must have an accessible name — a short label that tells users *what* is progressing. This name is provided via an `aria-label` attribute directly on the element, or by pointing to a visible label using `aria-labelledby`. When neither exists, the progress bar is completely anonymous: assistive technologies announce it as just "progress bar, 0%" with no context about what is being tracked — a password strength meter, a checkout step, a file upload, etc.

Why does aria progressbar name matter?

Screen reader users — including customers who are blind or have low vision — rely on accessible names to understand your store's interface. An unnamed progress bar during checkout, a file upload, or a product review form creates confusion and can cause those shoppers to abandon the task entirely, costing you sales and harming your brand reputation. Failing to provide accessible names for interactive or informative widgets violates WCAG 2.1 Success Criterion 1.1.1 (Non-text Content) and 4.1.2 (Name, Role, Value), exposing your store to accessibility complaints and potential legal liability in many jurisdictions (e.g., ADA in the US, EN 301 549 in the EU). Fixing it is a quick code change with zero impact on visual design.

How do I fix aria progressbar name?

Add a descriptive accessible name to every progress bar element so screen readers can announce what it represents.

Authoritative references

Related Accessibility (WCAG) issues