# ARIA meter nodes must have an accessible name

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

The `meter` role in ARIA represents a scalar measurement within a known range — think of a gauge showing a value like CPU temperature, password strength, or storage capacity. When a screen reader encounters an element with `role="meter"`, it announces the element as a meter, but without an accessible name, it cannot convey *what* is being measured. The user hears something like "meter" with no context, which is effectively meaningless.

This issue primarily affects users who are blind or have low vision and rely on screen readers, as well as users with mobility impairments who may navigate via assistive technologies. It relates to **WCAG 2.0/2.1/2.2 Success Criterion 1.1.1: Non-text Content (Level A)**, which requires that all non-text content has a text alternative that serves an equivalent purpose. A meter without a name fails to provide this text alternative.

## How to Fix

Ensure every element with `role="meter"` has a clear, descriptive accessible name using one of these methods:

1. **`aria-label`** — Add descriptive text directly to the element.
2. **`aria-labelledby`** — Reference another visible element that contains the label text. The referenced element must exist and contain non-empty text.
3. **`title`** — Use the `title` attribute as a fallback naming method (though `aria-label` or `aria-labelledby` are generally preferred).

The name should clearly describe what the meter is measuring so users understand its purpose in context.

## Examples

### Incorrect: Meter with no accessible name

The following meter has no name at all. A screen reader will announce it as a meter but cannot tell the user what it measures.

```html
<div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>
```

### Incorrect: Empty `aria-label`

An empty `aria-label` is equivalent to having no name.

```html
<div role="meter" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>
```

### Incorrect: `aria-labelledby` referencing a nonexistent or empty element

If the referenced element doesn't exist or has no text content, the meter still lacks an accessible name.

```html
<div role="meter" aria-labelledby="nonexistent" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>
```

```html
<div role="meter" aria-labelledby="empty-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"></div>
<div id="empty-label"></div>
```

### Correct: Using `aria-label`

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

### Correct: Using `aria-labelledby`

```html
<span id="meter-label">Battery level</span>
<div role="meter" aria-labelledby="meter-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"></div>
```

### Correct: Using the `title` attribute

```html
<div role="meter" title="Signal strength" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3"></div>
```

### Correct: Using the native `<meter>` element with a `<label>`

When possible, prefer the native HTML `<meter>` element, which has built-in semantics and can be associated with a `<label>`.

```html
<label for="fuel">Fuel level</label>
<meter id="fuel" min="0" max="100" value="68">68%</meter>
```