ARIA meter elements must have accessible names
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every meter must have a descriptive name; numeric values alone are insufficient.
Why this matters and how to fix it
Why this matters
A meter conveys a numeric value within a range, such as storage usage or battery level. Without an accessible name, screen readers announce only the numeric value, leaving users without context and making the information incomplete.
How to fix this issue
Provide a descriptive accessible name for the meter. Use a visible label linked to the element or `aria-label` / `aria-labelledby`. Do not include the numeric value in the label; assistive technologies will read it automatically from `aria-valuenow`.
Developer guidance
For custom meters, use `role="meter"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`, and provide a descriptive name. Prefer the native `<meter>` element for built-in semantics. Test with a screen reader to ensure both the name and value are announced correctly.
Code examples
Incorrect Implementation
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"></div>Correct Implementation
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-label="Storage usage"></div>Real-World Examples
Before
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55"></div> <!-- Screen reader announces '55' with no context -->After
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55" aria-label="Battery level"></div> <!-- Screen reader announces 'Battery level, 55%' -->Manual testing
- 1. Identify all elements with `role="meter"`.
- 2. Confirm each has an accessible name via visible label or `aria-label`/`aria-labelledby`.
- 3. Ensure `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` are correctly set.
- 4. Test with a screen reader to confirm the name and numeric value are announced together.
- 5. Prefer the native `<meter>` element when possible.
Trusted by organizations across Europe working toward WCAG and EAA conformance