--- title: 'ARIA: meter role' slug: Web/Accessibility/ARIA/Roles/meter_role tags: - ARIA - Accessibility - Meter - Web Development ---
The meter
role is used to identify an element being used as a meter.
A meter is a graphical display of a numeric value within a defined range. For example, showing battery percentage. A meter is not appropriate for values that do not have a meaningful maximum limit. Meters should not be used to indicate progress (for example loading), this should be communicated with the progress
element.
Each element with role="meter"
must also have one of the following:
aria-label
attribute.aria-labelledby
attribute pointing to an element with text that describes the meter.aria-valuenow
aria-valuemin
and aria-valuemax
indicating the current value of the meter.aria-valuetext
aria-valuenow
as a percentage. If this would not be accurate use this property to make the meter value understandable.aria-valuemin
aria-valuemax
.aria-valuemax
aria-valuemin
.<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>
Specification | Status |
---|---|
{{SpecName("ARIA 1.2","#meter","meter")}} | {{Spec2('ARIA 1.2')}} |