Meter Example

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The following example of a CPU meter demonstrates the meter design pattern.

Example

The value of this meter changes every 5 seconds. Use the pause button to stop changes.

Central Processing Unit (CPU) Usage

Keyboard Support

Not applicable.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`meter`		`div`	Identifies the element as a `meter`.
	`aria-valuemin="NUMBER"`	`div`	Specifies the minimum value the meter can have.
	`aria-valuemax="NUMBER"`	`div`	Specifies the maximum value the meter can have.
	`aria-valuenow="NUMBER"`	`div`	Specifies the current value of the meter.
	`aria-labelledby`	`div`	Identifies the element that provides the accessible name of the `meter`.

Javascript and CSS Source Code

CSS: meter.css
Javascript: meter.js

HTML Source Code

<p>
  The value of this meter changes every 5 seconds. Use the pause button to stop changes.
</p>
<h3 id="cpu_usage_label">
  Central Processing Unit (CPU) Usage
</h3>
<p>
  <button type="button" class="play-meters">
    Pause Updates
  </button>
</p>
<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>