aria-meter-name
Web validation
meter elements must have an accessible name.A role="meter" conveys a live measurement, such as battery charge or remaining storage. Without an accessible name, assistive technology announces only a raw number, leaving people who use screen readers guessing what the value means. Adding a programmatic name gives the necessary context so every user can understand the purpose of the meter.
Pass Patterns
Using aria-label attribute
The meter exposes a programmatic name with aria-label.
<div
role="meter"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="76"
aria-label="Battery level">
</div>Using aria-labelledby attribute
The meter is labelled by visible text via aria-labelledby.
<div id="remaining-storage-label">Remaining storage (GB)</div>
<div
role="meter"
aria-valuemin="0"
aria-valuemax="512"
aria-valuenow="128"
aria-labelledby="remaining-storage-label">
</div>Fail Patterns
No name at all
Assistive technologies announce only a generic role.
<div
role="meter"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="76">
</div>Empty aria-label
The aria-label attribute is empty, so the meter has no accessible name.
<div
role="meter"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="76"
aria-label="">
</div>Broken aria-labelledby reference
The aria-labelledby attribute points to an element that does not exist, so the meter has no accessible name.
<div
role="meter"
aria-valuemin="0"
aria-valuemax="40"
aria-valuenow="35"
aria-labelledby="fuel-tank-label">
</div>
<!-- fuel-tank-label element is missing -->WCAG techniques
Sufficient techniques
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader.
- Navigate to the
meterelement. - Listen to what the screen reader announces.
Expected result: The screen reader announces the accessible name (for example, “Battery level, 76 percent”).
Actual result: The screen reader announces only “meter, 76 percent,” giving no clue what the number means.
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the
meterelement.
Expected result: The Name field shows the text supplied by aria-label or aria-labelledby.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires every non-text item that conveys information such as a meter to have a text alternative that describes its purpose. An accessible name satisfies that requirement.
Why is this issue marked as Serious?
Without a descriptive name, users who rely on screen readers cannot tell what the meter measures. This creates a significant barrier to understanding current system status, which may block important tasks such as monitoring battery life or storage capacity across modern browsers and assistive technologies.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |