The <meter> HTML Element

Overview

The <meter> element is an HTML tag designed to graphically depict a scalar value within a defined range. This range can be the difference between the minimum and maximum values, and the element can handle whole or fractional numbers. The primary role of the <meter> tag is to give visual feedback in situations where such feedback can aid the user, like displaying disk space, a voting system's results, or the strength of a password.

Examples and Usage

A practical application of the <meter> element would be depicting scalar measurements relatable to a broad user base. Demonstrating the storage usage of online services like email accounts or cloud storage platforms provides an illustrative example.

Consider the representation below, which denotes the storage consumption of a free email account with a 10 GB limit:

<label for="storageUsed">Storage used in your email account:</label>
<meter id="storageUsed" value="3" min="0" max="10">3 GB used out of 10 GB</meter>

From this example, we can deduce:

The <label> element is paired with the <meter>, offering clear context about the storage consumption of the email account.
The value="3" attribute indicates that the user has consumed 3 GB out of their provided 10 GB storage.
The min="0" and max="10" attributes define the range, signifying that the storage can span from 0 GB to a maximum of 10 GB.
Content inside the <meter> tags serves two important roles:

Older browsers not supporting the <meter> element will show the text between its tags, ensuring users get the needed info even if they don't see the graphic. In addition, screen readers use the text inside the <meter> tags for clarity. This text helps users understand better than just relying on the element's attributes alone.

So, including content inside the meter tags is a proper approach for both compatibility with older browsers and better accessibility.

Attribute Breakdown

In addition to global attributes, the <meter> element comes with a set of specific attributes to customize its behavior:

Attribute	Description
`value`	The current numeric value. Must lie between the `min` and `max` values. If unspecified, defaults to 0. If outside the range, it equals the nearest end of the range.
`min`	The lower numeric bound of the range. If unspecified, defaults to 0. Must be less than the `max` value.
`max`	The upper numeric bound of the range. If unspecified, defaults to 1. Must be greater than the `min` value.
`low`	Indicates the upper end of the "low" range. Should be greater than the `min` but less than both `high` and `max`.
`high`	Specifies the lower end of the "high" range. Should be less than the `max` but more than both `low` and `min`.
`optimum`	Suggests the optimal value within the range. Can influence the meter's visual presentation depending on where it lies relative to `low` and `high`.

Accessibility Aspects

When considering accessibility for the <meter> element:

The role should ideally remain as meter. Assigning a different role could lead to confusion for assistive technologies, which expect the default role for this specific element.
The use of aria-valuemax or aria-valuemin attributes on meter elements is discouraged. This is because the <meter> element already provides a built-in semantic meaning for maximum and minimum values through its max and min attributes. Adding these aria-* attributes can be redundant and might cause unpredicted behavior with some screen readers.
However, any global aria-* attributes that don't conflict with the inherent semantics of the <meter> can be applied as needed to enhance accessibility.

Associated Elements

<progress>

Additional Notes

The rendering of the <meter> element, especially its segments, can differ across browsers. Such discrepancies revolve around the interpretation of segment boundaries.
The interpretation of segment boundaries within the <meter> element has been a topic of discussion. To put it simply, while Firefox sees these boundaries as not encompassing the exact value, browsers like Chrome and Safari include the boundary value within the segment. This nuance can lead to the meter appearing differently across various browsers.
A workaround for achieving consistent rendering across browsers involves tiny adjustments to the attribute values. By adding or subtracting minuscule fractions (e.g., 0.0000001) to the low and high attributes, you can achieve a higher level of precision and browser compatibility.
Web browser compatibility is generally impressive nowadays, but that doesn't negate the presence of discrepancies. Understanding and maneuvering around these differences is crucial for web developers.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes	Yes	Yes	Yes	No

Useful Resources

Can I use HTML element: meter

The HTML Living Standard Specification: meter