Read This First
No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why.
Meter Pattern
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.
Note
- A
metershould not be used to represent a value like the current world population since it does not have a meaningful maximum limit. -
The
metershould not be used to indicate progress, such as loading or percent completion of a task. To communicate progress, use the progressbar role instead.
Example
Keyboard Interaction
Not applicable.
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-valueminandaria-valuemaxrepresenting the current value of the meter. - The meter has aria-valuemin set to a decimal value less than
aria-valuemax. - The meter has aria-valuemax set to a decimal value greater than
aria-valuemin. -
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 asaria-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 rolemeterhas a label provided by aria-label.