A: ARIA meter nodes must have an accessible name (WCAG 1.1.1)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that every ARIA meter node has an accessible name.

This means

Elements with role="meter" often have values like aria-valuenow, but no name that explains what is being measured. Screen readers then only announce the value, not the purpose. Users do not understand the context.

Impact

Without a clear name, it remains unclear whether the value refers to loading progress, memory usage, signal strength, or something else. This complicates orientation and leads to misjudgments as well as WCAG violations.

Recommendation

• Prefer using the native <meter> with a visible <label>.
• For role="meter" assign a name via aria-label or aria-labelledby.
• Always provide values with aria-valuemin, aria-valuemax, and aria-valuenow.
• Add unit or scale if needed using aria-describedby.

Example

Problematic

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

Better

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

Best (native elements)

<label for="storage">Memory Usage</label>
<meter id="storage" min="0" max="100" value="72">72%</meter>