When you use ARIA roles such as role="meter", you help assistive technologies, including screen readers, understand what a visual element represents. However, if the element has no accessible name, users who rely on assistive tools will not know what the meter is for or what it is measuring. This is why every meter element must include a clear, descriptive, and programmatically determinable name.
A Note on <meter> vs role="meter"
HTML already provides a native <meter> element, which includes built-in semantics and accessibility support.
Whenever possible, use the native <meter> element instead of creating a custom control with role="meter".
The ARIA role should only be used when you are building a custom meter-like widget that cannot be expressed using the native <meter> element. This prevents redundant or unnecessary ARIA usage and follows the “Use native HTML first” principle recommended by WAI-ARIA.
WCAG Success Criteria
4.1.2 Name, Role, Value – Level A
This requirement ensures that any user interface component exposes its name, role, and current value to assistive technologies. When an element defines a role such as role="meter", a screen reader must be able to identify what the element is and what it represents.
If a meter lacks an accessible name, the tool may announce something generic like “75 percent,” without providing context about what is being measured. Users cannot tell whether this number refers to battery level, disk space, or progress.
Adding a name using aria-label, aria-labelledby, or a nonempty title attribute fixes this problem by clearly communicating the purpose of the meter.
What Is a Meter?
A meter represents a scalar measurement within a defined range, such as:
- Battery level
- Disk or storage usage
- Progress toward a goal
- System metrics, thresholds, or indicators
Example without a name:
<div role="meter" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>A screen reader may announce only “75 percent,” without describing what the value represents.
Adding a label solves this:
<div role="meter" aria-label="Storage usage" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>How to Fix the Problem
To ensure your meter is accessible, it must have a name that describes what it measures. You can provide the accessible name in one of three ways.
Correct Markup Examples
1. Using aria-labelledby (best when a visible label exists)
<div id="labeldiv">Storage usage</div>
<div role="meter" aria-labelledby="labeldiv"></div>The meter takes its name from the visible text “Storage usage”.
2. Using aria-label (best when no visible label exists)
<div role="meter" aria-label="Battery level"></div>This provides a direct, invisible label for assistive technologies.
3. Using the title attribute (fallback only)
<div role="meter" title="Download progress"></div>A nonempty title can act as an accessible name, but screen reader support is inconsistent, so use it only when aria-label or aria-labelledby cannot be used.
aria-label vs aria-labelledby — When to Choose Which
- Use aria-labelledby when there is visible text describing the meter, because it keeps the visual and accessible names consistent.
- Use aria-label only when no visible label exists.
This ensures the most stable and predictable naming behaviour across assistive technologies.
Incorrect Markup Examples
These fail because the meter has no accessible name.
<!-- Missing label entirely -->
<div role="meter" id="empty"></div>
<!-- Empty aria-label -->
<div role="meter" aria-label=""></div>
<!-- aria-labelledby pointing to missing ID -->
<div role="meter" aria-labelledby="nonexistent"></div>
<!-- aria-labelledby pointing to an empty element -->
<div role="meter" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>Screen readers cannot determine the purpose of the meter in any of these cases.
Why This Matters
If a meter lacks an accessible name, a screen reader might only announce:
“50 percent. Meter.”
This leaves users guessing about the meaning of the value.
With a proper name, users hear:
“Battery level, 50 percent.”
This makes the interface clear, understandable, and usable for everyone. A small change in code significantly improves the user experience for people who depend on assistive technologies.
Rule Description
All elements with role="meter" must include visible or programmatically associated text describing their purpose. The accessible name may come from:
- Visible text referenced with
<strong>aria-labelledby</strong> - An invisible but meaningful
aria-label - A nonempty title attribute (fallback)
Without a name, the element does not satisfy WCAG 4.1.2.
Simplified Algorithm
- Find all elements with
role="meter". - Check whether one of the following is present and valid:
- aria-label exists and contains text
- aria-labelledby references an element with readable text
- title contains nonempty text
- If none are present, the meter fails the rule.
Quick Reference Table
| Type | Example | Pass/Fail |
|---|---|---|
| aria-labelledby | <div id=”labelID”>Storage usage</div><div role=”meter” aria-labelledby=”labelID”></div> | ✅ |
| aria-label | <div role=”meter” aria-label=”Battery level”></div> | ✅ |
| title | <div role=”meter” title=”Download progress”></div> | ✅ (fallback) |
| Missing name | <div role=”meter”></div> | ❌ |
| Empty aria-label | <div role=”meter” aria-label=””></div> | ❌ |
| Broken reference | <div role=”meter” aria-labelledby=”nonexistentId”></div> | ❌ |
Summary
Every meter element must include a clear, descriptive, accessible name. This ensures that screen reader users understand what the element is measuring and what its value represents.
Always confirm that at least one of the following is true:
- aria-label contains meaningful text
- aria-labelledby points to readable text
- title is nonempty and used only as a fallback
Without an accessible name, the meter’s purpose is invisible to assistive technologies, even if it appears visually obvious on the screen.
