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

Steps for Adobe Commerce (Magento)

1. 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.
2. Open the file in your IDE or via the admin Theme (if using a page builder).
3. Add aria-label="[Descriptive label]" to the role="meter" element, or use aria-labelledby referencing an existing element's id.
4. Ensure aria-valuenow, aria-valuemin, and aria-valuemax are set with the correct PHP/templating variable values.
5. Run bin/magento cache:flush, then verify the rendered HTML on the frontend using the axe DevTools browser extension.

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.