Aria meter name
Quick winFound on 1% of audited stores.
Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element with role="meter" so screen readers can announce what the meter represents.
What it is
A "meter" is a widget that displays a value within a known range — think a product rating bar, a stock-level indicator, a loyalty-points gauge, or a battery-level graphic. When you mark an HTML element with role="meter" (or use the native `<meter>` tag), assistive technologies like screen readers need a text label to announce what the meter is measuring. Without that label, a screen reader will say something like "meter, 3 out of 5" — but the shopper using it has no idea whether that's a star rating, a stock level, or something else entirely. WCAG Success Criterion 1.1.1 (Non-text Content) requires that every non-text UI component have a text alternative that serves the same purpose.
Why it matters
Screen reader users — including many shoppers with visual impairments — rely on accessible names to understand interactive or informational widgets. An unlabeled meter is essentially invisible and meaningless to those users, which can cause them to miss critical information (e.g., "Only 2 left in stock!") and may cause them to abandon a purchase. Legally, WCAG 2.1 AA compliance is required or strongly expected under the ADA (USA), EN 301 549 (EU), AODA (Canada), and similar laws in many countries; failing it creates real litigation and regulatory risk. Google's crawlers also use accessibility signals as quality indicators, so systematically broken ARIA can influence how your pages are perceived. Fixing unlabeled meters is a quick win that reduces legal exposure, improves usability for a significant segment of shoppers, and demonstrates good technical hygiene to search engines.
How to fix it
- Identify every element on your store that displays a range-based value (star ratings, stock gauges, progress bars labeled as meters, loyalty-point bars, etc.) and is rendered with role="meter" or the HTML <meter> tag.
- Decide on the best labeling method: (a) aria-label directly on the element for a short inline string, (b) aria-labelledby pointing to the id of an existing visible heading or text node, or (c) a visually hidden <label> element or <span> that is associated via aria-labelledby.
- Add the chosen attribute so the label clearly names what is being measured (e.g., aria-label="Average customer rating" or aria-labelledby="rating-heading").
- Also confirm that aria-valuenow, aria-valuemin, and aria-valuemax are all present with correct numeric values — without them the meter conveys no meaningful data even when labeled.
- Validate the fix using a browser accessibility tree (Chrome DevTools → Accessibility panel), a free axe DevTools browser extension, or a screen reader (NVDA, VoiceOver, JAWS) to confirm the label is announced correctly.
- Re-run your accessibility scanner to confirm the aria-meter-name violation is resolved before publishing.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria meter name on Shopify
- In the Shopify admin, go to Online Store → Themes → (your active theme) → Edit code.
- Open the template or snippet file that renders the widget containing the meter (common files: snippets/product-rating.liquid, snippets/stock-level.liquid, sections/product-template.liquid).
- Locate the element that has role="meter" or is a <meter> tag.
- Add aria-label="[Descriptive name, e.g. Average customer rating]" directly on that element, or add aria-labelledby="[id-of-nearby-text]" if a visible label already exists in the markup.
- Ensure aria-valuenow, aria-valuemin, and aria-valuemax are present with correct values.
- Save the file and preview the theme. Use the axe DevTools browser extension to confirm the violation is gone before publishing.
How to fix aria meter name on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SSH).
- Find the template file rendering the meter widget — often woocommerce/templates/single-product/rating.php or a custom block in your page builder.
- If the meter is output by a plugin (e.g., a reviews plugin), check the plugin's settings for an accessibility label option first before editing templates.
- Add aria-label="Average customer rating" (or the appropriate description) to the role="meter" element. For the native <meter> tag, also wrap it: <label for="meter-id" class="screen-reader-text">Average customer rating</label><meter id="meter-id" ...>.
- Add or verify aria-valuenow, aria-valuemin, and aria-valuemax attributes match the displayed values.
- Use the axe DevTools browser extension on the frontend to verify the fix.
How to fix aria meter name on BigCommerce
- Log in to BigCommerce admin and go to Storefront → My Themes → Advanced → Edit Theme Files (Stencil theme).
- Locate the Handlebars template containing the meter — commonly templates/components/products/rating.html or a custom component.
- Add aria-label="[Descriptive label]" to the element with role="meter", or use aria-labelledby pointing to an existing text element's id.
- Confirm aria-valuenow, aria-valuemin, and aria-valuemax are populated with the correct dynamic values (e.g., {{product.rating.average}}).
- Save, push the theme update, and verify with the axe DevTools browser extension on a live product page.
How to fix aria meter name on Wix
- In the Wix Editor, select the meter/progress widget on your page.
- Open the element's Settings or Accessibility panel (the icon that looks like a person) if available for that widget type.
- Enter a descriptive accessible name in the 'Accessible label' or 'Aria label' field.
- If the widget does not expose an accessibility field, switch to Wix Studio (which provides full HTML/CSS/ARIA control via Custom Code or Dev Mode) or replace the widget with a custom HTML embed that includes the correct ARIA attributes.
- For a custom HTML embed: go to Add → Embed → Custom Code / HTML iframe, then paste a complete <meter> element with aria-label, aria-valuenow, aria-valuemin, and aria-valuemax attributes.
- Preview and test with the axe DevTools browser extension.
How to fix aria meter name on Wix Studio
- Open the project in Wix Studio and select the meter component.
- In the Properties panel, look for the Accessibility section and set the Aria Label field to a descriptive string (e.g., 'Average customer rating').
- If editing via code (Velo), open the element's properties in the Code panel and set element.accessibility.ariaLabel = 'Average customer rating';
- For custom HTML widgets, embed a <meter> element with full ARIA attributes via the HTML Component and set aria-label there.
- Use the built-in Preview mode and the axe DevTools browser extension to confirm the label is announced correctly.
How to fix aria meter name on Squarespace
- Squarespace does not expose ARIA attributes through its visual editor for most built-in blocks.
- If the meter is inside a Code Block (Insert → Code), edit the HTML directly and add aria-label="[Descriptive label]" plus aria-valuenow, aria-valuemin, and aria-valuemax to the <meter> or role="meter" element.
- If the meter is rendered by a built-in Squarespace block (e.g., a rating widget), inject a fix via Settings → Advanced → Code Injection (Footer): add a small <script> snippet that locates the element by selector and sets setAttribute('aria-label', 'Average customer rating').
- Test the page with the axe DevTools browser extension to confirm the fix is applied after injection.
How to fix aria meter name on Webflow
- Open your project in the Webflow Designer and select the element that has role="meter" (or the <meter> element).
- In the right-hand Element Settings panel (the gear icon), scroll to the Custom Attributes section.
- Click the + button to add a new attribute: Name = aria-label, Value = [your descriptive label, e.g. 'Average customer rating'].
- Also add aria-valuenow, aria-valuemin, and aria-valuemax as separate custom attributes with correct numeric values.
- Publish the site and verify with the axe DevTools browser extension in your browser.
How to fix aria meter name on Adobe Commerce (Magento)
- Identify the PHTML or HTML UI Component template that renders the meter element — common locations: app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/product/view/type/ or a custom module template.
- Open the file in your IDE or via the admin Theme (if using a page builder).
- Add aria-label="[Descriptive label]" to the role="meter" element, or use aria-labelledby referencing an existing element's id.
- Ensure aria-valuenow, aria-valuemin, and aria-valuemax are set with the correct PHP/templating variable values.
- Run bin/magento cache:flush, then verify the rendered HTML on the frontend using the axe DevTools browser extension.
Does your site have this issue?
Run a free SEOLZ scan to find aria meter name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria meter name?
A "meter" is a widget that displays a value within a known range — think a product rating bar, a stock-level indicator, a loyalty-points gauge, or a battery-level graphic. When you mark an HTML element with role="meter" (or use the native `<meter>` tag), assistive technologies like screen readers need a text label to announce *what* the meter is measuring. Without that label, a screen reader will say something like "meter, 3 out of 5" — but the shopper using it has no idea whether that's a star rating, a stock level, or something else entirely. WCAG Success Criterion 1.1.1 (Non-text Content) requires that every non-text UI component have a text alternative that serves the same purpose.
Why does aria meter name matter?
Screen reader users — including many shoppers with visual impairments — rely on accessible names to understand interactive or informational widgets. An unlabeled meter is essentially invisible and meaningless to those users, which can cause them to miss critical information (e.g., "Only 2 left in stock!") and may cause them to abandon a purchase. Legally, WCAG 2.1 AA compliance is required or strongly expected under the ADA (USA), EN 301 549 (EU), AODA (Canada), and similar laws in many countries; failing it creates real litigation and regulatory risk. Google's crawlers also use accessibility signals as quality indicators, so systematically broken ARIA can influence how your pages are perceived. Fixing unlabeled meters is a quick win that reduces legal exposure, improves usability for a significant segment of shoppers, and demonstrates good technical hygiene to search engines.
How do I fix aria meter name?
Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element with role="meter" so screen readers can announce what the meter represents.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN