Status and feedback
Accessible meters and gauges: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A meter describes a scalar measurement within a known range, such as storage used. It is different from task progress. Show the units and meaning in text so the color or fill length is not the only explanation.
A practical example
An upload area reports 650 MB of a 1,000 MB quota used. The meter visualizes the amount, while the text tells the user how much space is left without implying an upload is currently running.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
This sample treats 0–20 GB as the preferred band, over 20–80 GB as moderate usage and over 80 GB as high usage.
How to check it
- Inspect the accessible name, minimum, maximum and current value.
- Compare the visible units and explanation with the value exposed to assistive technology.
- Test warning thresholds in more than color and confirm that an out-of-range value is handled intentionally.
What can be missed
Do not use a meter to make an unsupported legal-risk score look like a measured fact. If the number is an estimate or assumption, explain that before visualizing it.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<label for="storage">Storage used</label>
<meter id="storage" min="0" max="1000" value="650">650 MB of 1,000 MB</meter>
<p>350 MB available.</p>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.