Names, roles & states
A Meter Has No Name
A screen reader announces a value like "75%" but not what it measures, so people can't tell if it's battery, storage or password strength.
aria-meter-nameWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
A meter shows a value within a known range, such as disk space used or password strength. Sighted people read the label next to it.
Without an accessible name — the label a screen reader reads out — the value is announced alone. A number without context means nothing.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "meter, 75%" with no clue what is being measured. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader; otherwise they read the visible label. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It fails WCAG 2.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act and EN 301 549 point to WCAG. | High impact |
| Conversion | A nameless password strength or storage meter can stall sign-ups or upgrades. | Moderate impact |
| SEO | No real search benefit. | Low impact |
| Brand trust | Dashboards full of unnamed numbers feel careless to screen reader users. | Low impact |
| Cost to fix | A one-line fix. Fix it once in the shared meter component. | High impact |
Fixing it in code
Storage meter with a visible label
Don't
<span>Storage used</span>
<div role="meter" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>A screen reader says: “meter, 75”
Do
<span id="storage-label">Storage used</span>
<div role="meter" aria-labelledby="storage-label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>A screen reader says: “Storage used, meter, 75”
aria-labelledby links the visible text to the meter as its name.
Meter with no visible label
Don't
<div role="meter" aria-valuenow="3" aria-valuemin="0" aria-valuemax="4" aria-valuetext="Strong"></div>A screen reader says: “meter, Strong”
Do
<div role="meter" aria-label="Password strength" aria-valuenow="3" aria-valuemin="0" aria-valuemax="4" aria-valuetext="Strong"></div>A screen reader says: “Password strength, meter, Strong”
aria-label gives a name when there's no text to point to.
Designer's handoff note
Give every meter a visible label that says what it measures.
Note the label in the spec so developers can link it to the meter.
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- You hear what it measures, like "Storage used, meter, 75".
- Fail
- You hear only "meter" and a number.
What a green scan still misses
A scanner checks that a name exists. It can't tell if the name is clear or matches what the meter really measures.
Reference
- Rule ID
aria-meter-name- Raised by
- axe-core: “ARIA meter nodes must have an accessible name”
- WCAG
- 1.1.1 Non-text Content (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.1.1.1 · RGAA 11.1.1
- Last reviewed
- 14 October 2026