How to fix aria meter name on Shopify

Steps for Shopify

1. In the Shopify admin, go to Online Store → Themes → (your active theme) → Edit code.
2. 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).
3. Locate the element that has role="meter" or is a <meter> tag.
4. 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.
5. Ensure aria-valuenow, aria-valuemin, and aria-valuemax are present with correct values.
6. Save the file and preview the theme. Use the axe DevTools browser extension to confirm the violation is gone before publishing.

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.

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.

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