ARIA meter needs accessible names

ARIA meter elements must have an accessible name

Any element with role="meter" needs a programmatic name that explains what the meter represents. This appears in dashboards, status indicators, and custom visual meters. It affects people using screen readers and speech tools that rely on names to identify controls and status.

Why It Matters

Without a name, a screen reader may only announce a percentage or range with no context. Users cannot tell if 70% refers to battery level, storage usage, or something else.

Voice control users depend on names to reference items by speech. Cognitive and low-vision users also benefit when the purpose is clearly conveyed.

Common Causes

• role="meter" used without aria-label or aria-labelledby
• Nearby text exists but is not programmatically associated
• Empty aria-label values ("")
• aria-labelledby points to a missing or empty element
• Relying solely on visual icons or colors to convey purpose
• Using the title attribute instead of a robust label strategy

How to Fix

1. Choose clear, concise text that describes the meter’s purpose (e.g., "Storage used", "CPU load").
2. Provide the accessible name using one of these patterns:
   • Prefer aria-labelledby that references visible text.
   • Use aria-label for a concise embedded label when no visible text is present.
   • title can supply a name, but prefer aria-labelledby or aria-label for consistency.
3. Ensure value attributes are present and accurate for comprehension:
   • aria-valuemin, aria-valuemax, aria-valuenow (and aria-valuetext if a human-friendly value is needed).
4. Verify any ID in aria-labelledby exists and the referenced element contains meaningful text.
5. Do not leave aria-label empty. Remove it if not used, or provide a proper value.
6. If the meter is purely decorative, remove role="meter" and hide it from assistive tech (aria-hidden="true").

Standards note: Providing an accessible name aligns with WCAG 2.2 Success Criterion 4.1.2 (Name, Role, Value).

How to Test

Keyboard

• If the meter is focusable, tab to it and confirm the label is announced along with the value. If not focusable, this step may not apply.

Screen reader

• NVDA/JAWS (Windows): Navigate by landmarks or graphics. Confirm it announces the name (e.g., "Storage used, meter, 72 percent").
• VoiceOver (macOS/iOS): Navigate by controls or explore by touch. Confirm the announced name and value are clear.
• TalkBack (Android): Explore by touch. Confirm the name and value are read together.

Visual inspection / DevTools

• Use browser accessibility tools to check the computed accessible name for the meter node.
• Confirm ID references in aria-labelledby resolve to visible, meaningful text.

Quick checklist

• Name exists and describes purpose.
• Value (now/min/max) is present and correct.
• No empty aria-label values.
• aria-labelledby references valid, non-empty elements.
• Name is short and clear (avoid redundancy).
• Works with at least one desktop and one mobile screen reader.

Good Example

<p id="disk-label">Storage used</p>
<div role="meter"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="72"
     aria-labelledby="disk-label"></div>

<div role="meter"
     aria-label="CPU load"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="55"></div>

Bad Example

<!-- No accessible name at all -->
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"></div>

<!-- Empty aria-label provides no name -->
<div role="meter" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"></div>

<!-- Broken reference: id does not exist -->
<div role="meter" aria-labelledby="missingId" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7"></div>

Quick Checklist

• role="meter" has a clear accessible name (aria-labelledby or aria-label)
• Referenced IDs exist and contain meaningful text
• No empty name attributes
• Value attributes (min/max/now) accurately reflect the range
• Name describes what the meter measures, not just the value
• Screen readers announce name + role + value together
• Avoid relying on title alone; prefer aria-labelledby/aria-label