Skip to content

Meter Example

Meter Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

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

About This Example

The following example of a CPU meter demonstrates the Meter 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

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top