SEOLZ

Aria meter name

Moderate effort

Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element that uses role="meter" so screen readers can announce what the meter represents.

What it is

A "meter" is a web element that visually displays a measurement within a known range — for example, a product rating bar, a stock-level indicator, a review score gauge, or a loyalty-points progress bar. When a developer gives an element the ARIA role of `meter` (or uses the native HTML `<meter>` tag), assistive technologies like screen readers need a text label that explains *what* is being measured. Without that label, a screen reader will announce something unhelpful like "meter, 60%" with no context about whether that number refers to a rating, a storage level, or anything else. The `aria-meter-name` rule flags any meter element that is missing this accessible name.

Why it matters

Screen reader users — who may be blind, have low vision, or have cognitive disabilities — rely entirely on text labels to understand what a meter is communicating. Without a name, a product rating bar is meaningless noise, which can directly cause a visually-impaired shopper to lose confidence in your product and abandon their purchase. Under WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A) and 4.1.2 (Name, Role, Value, Level A), this is a baseline legal accessibility requirement in many jurisdictions — including the ADA in the United States, the European Accessibility Act, and the UK Equality Act. Failing it exposes your store to complaints, legal action, and exclusion from the roughly 1-in-5 users who have a disability. It can also hurt your SEO indirectly, because search engines reward sites that follow structured, semantically correct markup.

How to fix it

  1. Identify every meter element: search your theme and custom code for `role="meter"`, `<meter`, and any JavaScript components that render rating bars, stock indicators, or score gauges.
  2. Choose the right labelling technique for each meter: (a) add an `aria-label` attribute with a concise description directly on the element (e.g. `aria-label="Average customer rating"`), (b) add a visible `<label>` or heading nearby and link it with `aria-labelledby="id-of-that-element"`, or (c) for native `<meter>` tags, wrap them in a `<label>` element.
  3. Ensure the label is specific and meaningful — include the thing being measured (e.g. 'Product rating', 'Stock level', 'Loyalty points') not just a generic word like 'meter'.
  4. If the meter also displays its value visually (e.g. '4.2 out of 5 stars'), verify the `value`, `min`, and `max` attributes (or `aria-valuenow`, `aria-valuemin`, `aria-valuemax`) are also present and correct so screen readers can announce the full context.
  5. Test with a screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on macOS/iOS) or run the axe browser extension to confirm the rule no longer triggers.
  6. Check all page templates that use meters (product pages, category pages, account/loyalty pages) not just one instance — the fix must be applied everywhere the pattern is used.
<meter role="meter" aria-label="Average customer rating" aria-valuenow="4.2" aria-valuemin="0" aria-valuemax="5" value="4.2" min="0" max="5"> 4.2 out of 5 </meter>

<!-- OR using aria-labelledby -->
<p id="rating-label">Average customer rating</p>
<meter aria-labelledby="rating-label" value="4.2" min="0" max="5">4.2 out of 5</meter>

Fix it on your platform

Pick your platform for the exact steps.

How to fix aria meter name on Shopify
  1. In your Shopify Admin, go to Online Store → Themes → click 'Edit code' on your active theme.
  2. Search across your theme files (Liquid templates and Snippets) for `role="meter"`, `<meter`, or any star-rating / progress-bar snippet (common filenames: product-rating.liquid, star-rating.liquid, snippets/rating.liquid).
  3. Open the relevant file and add `aria-label="Average customer rating"` (or the appropriate label) directly to the meter element, or add a visible label element linked via `aria-labelledby`.
  4. If you use a review app (e.g. Judge.me, Stamped, Yotpo), check the app's display settings or contact support — many review apps have an accessibility settings section or customisable widget templates where you can inject aria attributes.
  5. Save, then use the axe DevTools browser extension on your live store to confirm the rule no longer fires.
Full Shopify guide →Official Shopify docs ↗
How to fix aria meter name on WooCommerce
  1. In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme / FTP) and search for `role="meter"`, `<meter`, or star-rating templates in your active theme.
  2. WooCommerce's built-in star rating is rendered in `woocommerce/templates/single-product/rating.php` and `loop/rating.php`. Copy these to your child theme under `yourchildtheme/woocommerce/single-product/rating.php`.
  3. Open the copied file and add `aria-label="Average customer rating"` to the `<meter>` or `role="meter"` element.
  4. Alternatively, install the 'WP Accessibility' plugin (by Joe Dolson) which patches several common ARIA labelling issues automatically, then verify the meter fix specifically.
  5. Clear any caching plugins and test with axe DevTools or a screen reader.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix aria meter name on BigCommerce
  1. In BigCommerce Admin, go to Storefront → Themes → click 'Advanced' → 'Edit Theme Files' for your active Stencil theme.
  2. Search template files (templates/components/products/rating.html or similar) for `role="meter"` or `<meter`.
  3. Add `aria-label="Average customer rating"` (or a Handlebars variable like `aria-label="{{product.name}} rating"`) to the meter element.
  4. Commit your changes and push to your live theme, then verify with the axe browser extension.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix aria meter name on Wix
  1. Open Wix Editor for your site. Click on the ratings or progress-bar widget that contains the meter.
  2. If it is a native Wix Ratings widget, go to its Settings panel — check for an 'Accessible label' or 'Title' field and fill it in (e.g. 'Product rating').
  3. If using Wix Velo (custom code), open the relevant Page Code or a custom component and locate the element with role='meter'. Add `.setAttribute('aria-label', 'Average customer rating')` in your Velo JavaScript.
  4. Publish your site and retest with the axe browser extension.
Full Wix guide →Official Wix docs ↗
How to fix aria meter name on Squarespace
  1. Squarespace has limited direct HTML editing. Go to Website → Pages → open the page containing the meter element.
  2. If the meter is inside a Code Block (Insert Point → Code), edit the block and add `aria-label="Average customer rating"` directly to the meter element's HTML.
  3. If the meter is rendered by a built-in Squarespace block (e.g. a product rating), go to Settings → Advanced → Code Injection and add a short JavaScript snippet that queries the meter element and sets its aria-label: `document.querySelectorAll('[role=meter]').forEach(el => { if (!el.getAttribute('aria-label')) el.setAttribute('aria-label', 'Product rating'); });`
  4. Save and test with axe DevTools.
Full Squarespace guide →Official Squarespace docs ↗
How to fix aria meter name on Webflow
  1. Open the Webflow Designer and select the element that has role='meter' (e.g. a progress bar or star widget).
  2. In the right-hand panel, click the 'Element Settings' tab (the gear icon).
  3. Scroll to the 'Custom Attributes' section, click the '+' button, add Name: `aria-label` and Value: `Average customer rating` (or the relevant description).
  4. If using a CMS collection for products, use a dynamic bind: set the Value to a CMS field like the product name + ' rating' using Webflow's CMS binding on the attribute.
  5. Publish and verify with axe DevTools.
Full Webflow guide →Official Webflow docs ↗
How to fix aria meter name on Adobe Commerce (Magento)
  1. Locate the rating/meter template in your theme: typically `app/design/frontend/<Vendor>/<theme>/Magento_Review/templates/` — files like `rating.phtml` or `view/frontend/templates/product/view/list.phtml`.
  2. If you have not already, create a theme override by copying the core template into your custom theme directory rather than editing core files.
  3. Open the template and find the `<meter>` or `role="meter"` element. Add `aria-label="<?= $block->escapeHtml(__('Average customer rating')) ?>"`.
  4. Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy`, then test with axe DevTools on the frontend.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Aria meter name?

A "meter" is a web element that visually displays a measurement within a known range — for example, a product rating bar, a stock-level indicator, a review score gauge, or a loyalty-points progress bar. When a developer gives an element the ARIA role of `meter` (or uses the native HTML `<meter>` tag), assistive technologies like screen readers need a text label that explains *what* is being measured. Without that label, a screen reader will announce something unhelpful like "meter, 60%" with no context about whether that number refers to a rating, a storage level, or anything else. The `aria-meter-name` rule flags any meter element that is missing this accessible name.

Why does aria meter name matter?

Screen reader users — who may be blind, have low vision, or have cognitive disabilities — rely entirely on text labels to understand what a meter is communicating. Without a name, a product rating bar is meaningless noise, which can directly cause a visually-impaired shopper to lose confidence in your product and abandon their purchase. Under WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A) and 4.1.2 (Name, Role, Value, Level A), this is a baseline legal accessibility requirement in many jurisdictions — including the ADA in the United States, the European Accessibility Act, and the UK Equality Act. Failing it exposes your store to complaints, legal action, and exclusion from the roughly 1-in-5 users who have a disability. It can also hurt your SEO indirectly, because search engines reward sites that follow structured, semantically correct markup.

How do I fix aria meter name?

Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element that uses role="meter" so screen readers can announce what the meter represents.

Authoritative references

Related Accessibility (WCAG) issues