ARIA: meter role

The meter role is used to identify an element being used as a meter.

Description

A meter is a graphical display of a numeric value within a defined range. For example, showing battery percentage. A meter is not appropriate for values that do not have a meaningful maximum limit. Meters should not be used to indicate progress (for example loading), this should be communicated with the progress element.

Each element with role="meter" must also have one of the following:

Associated ARIA roles, states, and properties

aria-valuenow
Set to a decimal value between aria-valuemin and aria-valuemax indicating the current value of the meter.
aria-valuetext
Assistive technologies often present the value of aria-valuenow as a percentage. If this would not be accurate use this property to make the meter value understandable.
aria-valuemin
Set to a decimal value representing the minimum value, and less than aria-valuemax.
aria-valuemax
Set to a decimal value representing the maximum value, and greater than aria-valuemin.

Examples

An example of a meter

<div role="meter"
  aria-valuenow="90"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="cpu_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>

Working Examples:

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.2
The definition of 'meter' in that specification.
Working Draft