ARIA meter elements must have an accessible name.

Elements with role="meter" display a scalar value within a known range. Common examples include disk usage indicators, password strength meters, and battery level displays. When these elements lack an accessible name, screen reader users encounter a value with no context. They hear something like "60 percent" without knowing what that percentage refers to.

WCAG Success Criterion 4.1.2 (Name, Role, Value) at Level A requires that all user interface components have a name that can be programmatically determined. A meter without an accessible name fails this requirement because assistive technology cannot convey what the meter measures. A sighted user might rely on a nearby visual label or surrounding page context, but screen readers need an explicit programmatic association to communicate the same information.

The fix depends on the context of the meter on the page. There are two standard approaches:

• Use aria-label to provide a name directly on the element. This works well when no visible text label exists nearby.
• Use aria-labelledby to point to an existing visible label by its id. This is the better option when a visible text label already exists, because it keeps the visual and programmatic labels in sync.

If a visible <label> or heading already describes the meter, prefer aria-labelledby so that any future text changes automatically update the accessible name. If the label is only needed for assistive technology and should not appear visually, use aria-label.

Examples

Missing accessible name

This meter has no name. A screen reader will announce the value but not what it measures.

<div role="meter"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="72">
</div>

Fixed with aria-label

The aria-label attribute gives the meter a name directly. A screen reader will announce something like "Disk usage, 72 percent."

<div role="meter"
  aria-label="Disk usage"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="72">
</div>

Fixed with aria-labelledby

When a visible label already exists on the page, aria-labelledby associates it with the meter programmatically.

<span id="pw-strength-label">Password strength</span>
<div role="meter"
  aria-labelledby="pw-strength-label"
  aria-valuemin="0"
  aria-valuemax="3"
  aria-valuenow="2">
</div>

Multiple meters on the same page

When a page contains several meters, each one needs its own distinct name. Without unique names, screen reader users cannot tell the meters apart.

<span id="cpu-label">CPU usage</span>
<div role="meter"
  aria-labelledby="cpu-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="45">
</div>

<span id="memory-label">Memory usage</span>
<div role="meter"
  aria-labelledby="memory-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="78">
</div>

Learn more:

W3C Reference

Understanding Success Criterion 1.1.1: Non-text Content

→

MDN Reference

ARIA: meter role

→

W3C Reference

WAI-ARIA 1.2 Specification

→