The <meter> Element
As defined in the HTML Living Standard, the <meter> element represents a scalar measurement within a known range, or a fractional value. Examples include disk usage, the relevance of a query result, or the fraction of a voting population that has voted.
<label for="fuel">Fuel Level:</label>
<meter id="fuel" min="0" max="100" low="30" high="80" optimum="100" value="90">
at 90%
</meter>
View HTML Living Standard: The meter element
Technical Attributes
value: The current numeric value. Required.min&max: The lower and upper bounds of the range. Default to 0 and 1 respectively.low&high: Define what is considered a "low" or "high" value. Browsers often change the meter's color when the value crosses these thresholds.optimum: Indicates the "best" value in the range.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
A visual bar representing a value is useless to a screen reader user if it's just a styled <div>. Using <meter> ensures the browser communicates the current value and the total range to assistive technology.
Meter vs. Progress
It is a common mistake to use these two elements interchangeably.
<meter>: Used for static measurements of a known quantity (e.g., storage space, temperature, scores).<progress>: Used for active tasks that are currently completing (e.g., file downloads, form submission processing).
A11y Tip: Visible Text Fallback
While screen reader support for <meter> has improved, it is still best practice to include the text representation of the value inside the element tags (e.g., <meter>80%</meter>). Browsers will hide this text visually but it provides a fallback for older assistive technologies.