How to fix aria meter name on Webflow

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 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.
Official Webflow 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 Webflow 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