How to fix aria meter name on Adobe Commerce (Magento)

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.

Steps for 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.
Official Adobe Commerce (Magento) documentation ↗
<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>

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.

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.

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

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ audit — we’ll find aria meter name and every other issue across your whole site.

Scan my site free

Fix aria meter name on another platform