Meter Example

The following meter examples demonstrate the meter design pattern.

Example

This meter changes its value randomly every 5 seconds.

Keyboard Support

It would not have any keyboard support since this is system generated information.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
meter div
  • Identifies the element as a meter widget.
tabindex="0" div
  • Includes the element in the tab sequence.
aria-valuemin="NUMBER" div
  • Specifies a numeric value that is the minimum value the meter can have.
aria-valuemax="NUMBER" div
  • Specifies a numeric value that is the maximum value the meter can have.
aria-valuenow="NUMBER" div
  • A numeric value that is the current value of the meter
aria-label div
  • Identifies the accessible name for meter widget.

Javascript and CSS Source Code

HTML Source Code