Back to Info and Examples for Accessibility Insights for Web

aria-meter-name

ARIA meters must have accessible names.

Why it matters

An ARIA meter is a custom control corresponding to the HTML <meter> element. A meter represents either a scalar value within a known range, or a fractional value. For example, a meter might represent the unused portion of total storage capacity. An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. When an ARIA meter doesn't an accessible name, people who use assistive technologies have no way of knowing its purpose.

How to fix

For each element with role="meter", provide an accessible name using one of the following methods.

Good

title attribute

Better

aria-label attribute

Best

aria-labelledby attribute referencing visible text

Example

Fail

A <div> element is coded to function as an ARIA meter. A <label> element is used in attempt to give the meter an accessible name. Although a <label> can be used with a <meter> element, its use with <div> elements is not supported, and so no programmatic association is made between the <label> and the <div>. Because the ARIA meter does not have an accessible name, people who use assistive technologies can't tell its purpose.

<label for "disk-usage-meter">Disk Usage</label>
<div id="disk-usage-meter" role="meter" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<svg width="100" height="100" class="fill"  aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor">
</rect>
</svg>
</div>

Pass

The <label> element is replaced with a <p> element, and a programmatic association is created by an aria-labelledby attribute on the <div>. The ARIA meter has an accessible name that's available to all users.

<p id="disk-usage-label">Disk Usage</p>
<div role="meter" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-labelledby="disk-usage-label">
<svg width="100" height="100" class="fill"  aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor">
</rect>
</svg>
</div>

About this rule

This rule passes if ANY of the following is true:

Element has an aria-labelledby attribute that references elements that are visible to screen readers
Element has a non-empty aria-label attribute
Element has a non-empty title attribute

More examples

Understanding Success Criterion 1.1.1: Non-text Content