Rampsight

All rules

ARIA

Meters need a name

Why it matters

role="meter" announces a value with no indication of what is being measured — "7 out of 10" with no subject.

How to fix it

  1. Add aria-label or aria-labelledby naming the quantity ("Storage used").
  2. Keep aria-valuemin, aria-valuemax and aria-valuenow in place so the value has a scale.

In markup

Fails
<div role="meter" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10"></div>
Passes
<div role="meter" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10"
     aria-label="Storage used"></div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on aria-meter-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.