# ARIA meter elements must have an accessible name.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/aria-meter-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

```html
<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."

```html
<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.

```html
<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.

```html
<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>
```