Meter
A meter is used to show a scalar measurement within a known range or a fractional value. For example, a meter could be used to display a device's current battery or a car's remaining fuel level. In cases where there is no fixed maximum, it is preferable to utilize the progress bar.
This page provides examples of both HTML and ARIA based solutions for creating accessible meters.
HTML5 Meter Example
This is the best solution to use, especially when building from scratch.
Use of the HTML5 meter element is supported in most browsers. As defined in the
MDN docs,
it is equivalent to the ARIA meter role which will allow screen readers to read out the current percentage of the meter.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
ARIA role="meter" Example
If you are already using a component similar to this in existing work that is not accessible, go to the developer walkthrough in this section to see how we made our implementation accessible.
Should a case arise where the HTML5 meter component is not accessible for a given browser, or you have to refactor existing code, the following can be used as an alternative.
Note: If you are using v.Nu to validate your HTML and have an older version, there is a known issue with role="meter".
This gets flagged as an invalid role despite being defined in ARIA 1.2. You may want to update the software to avoid it being flagged.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
Screen Reader Support
Due to inconsistent support of the meter tag and ARIA role, the examples on this page use aria-valuetext. This attribute defines how the value of the meter should be announced by various screen readers. We use a Javascript library to implement it so that there are less human error when authoring it. If you prefer not to utilize this attribute, the tables below outline how screen readers will announce these meter component acros different browsers/platforms.
For those using axe validation, use of aria-valuetext may cause an 'aria-allowed-attr' error. To resolve this, be sure to update to v4.9.1 or newer.
| Example | Chrome (Android, Talkback) | Firefox (Windows, NVDA) | Safari (OSX, Voiceover) | Safari (iOS, Voiceover) |
|---|---|---|---|---|
| HTML5 |
Reads meter value. 0,2, Disk C 0.9, Disk D 0.6, Disk E |
Reads meter value. Disk C, Progress Bar, 0.2 Disk D, Progress Bar, 0.9 Disk E, Progress Bar, 0.6 |
Reads meter condition. Optimal value, Disk C, Level Indicator Critical value, Disk D, Level Indicator Suboptimal value, Disk E, Level Indicator |
Reads meter condition. Disk C, Optimal value Disk D, Critical value Disk E, Suboptimal value |
| ARIA |
Reads meter value. 0,2, Disk C 0.9, Disk D 0.6, Disk E |
Reads meter value. Disk C, Progress Bar, 0.2 Disk D, Progress Bar, 0.9 Disk E, Progress Bar, 0.6 |
Reads meter condition. Disk C, Optimal, Level Indicator Disk D, Critical, Level Indicator Disk E, Suboptimal, Level Indicator |
Reads meter value Disk C, 0.2 Disk D, 0.9 Disk E, 0.6 |
| Example | Chrome (Android, Talkback) | Firefox (Windows, NVDA) | Safari (OSX, Voiceover) | Safari (iOS, Voiceover) |
|---|---|---|---|---|
| HTML5 (aria-valuetext) |
Reads meter value. 20%, Disk C 90%, Disk D 60%, Disk E |
Reads meter value. Disk C, Progress Bar, 20% Disk D, Progress Bar, 90% Disk E, Progress Bar, 60% |
Reads meter condition. 20%, Disk C, Level Indicator 90%, Disk D, Level Indicator 60%, Disk E, Level Indicator |
Reads meter condition. Disk C, 20% Disk D, 90% Disk E, 60% |
| ARIA (aria-valuetext) |
Reads meter percentage. 20%, Disk C 90%, Disk D 60%, Disk E |
Reads meter percentage. Disk C, Progress Bar, 20% Disk D, Progress Bar, 90% Disk E, Progress Bar, 60% |
Reads meter percentage. Disk C, 20%, Level Indicator Disk D, 90%, Level Indicator Disk E, 60%, Level Indicator |
Reads meter percentage. Disk C, 20% Disk D, 90% Disk E, 60% |