How to fix aria progressbar name on WooCommerce

Steps for 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.

<!-- 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>

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.

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.

See the complete Aria progressbar name guide for every platform and the full background.