About This Pattern
A meter is a graphical display of a numeric value that varies within a defined range. For example, a meter could be used to depict a device's current battery percentage or a car's fuel level.
metershould not be used to represent a value like the current world population since it does not have a meaningful maximum limit.
metershould not be used to indicate progress, such as loading or percent completion of a task. To communicate progress, use the progressbar role instead.
WAI-ARIA Roles, States, and Properties
- The element serving as the meter has a role of meter.
- The meter has aria-valuenow set to a decimal value between
aria-valuemaxrepresenting the current value of the meter.
- The meter has aria-valuemin set to a decimal value less than
- The meter has aria-valuemax set to a decimal value greater than
Assistive technologies often present
aria-valuenowas a percentage. If conveying the value of the meter only in terms of a percentage would not be user friendly, the aria-valuetext property is set to a string that makes the meter value understandable. For example, a battery meter value might be conveyed as
aria-valuetext="50% (6 hours) remaining".
If the meter has a visible label, it is referenced by aria-labelledby on the element with role
meter. Otherwise, the element with role
meterhas a label provided by aria-label.