Meter

Description

A meter is a graphical representation of a numerical value within a known range, or a fractional value. Unlike a progress bar, which typically shows the progress of a task, a meter represents a scalar measurement or gauge, such as disk usage, battery level, or the relevance of a search result.

• Meters are used to display data where there is a defined minimum and maximum value.
• They may provide a visual indication of whether a value is "low," "high," or "optimal" within that range.

When to use

• Use a meter to display static measurements or status information that fits within a specific range.
• Avoid using a meter to indicate progress for a process that is currently in motion (use a progress bar instead).
• Meters should include visual or programmatic labels so users understand what the measurement represents.

Native HTML Meter

Examples

• HTML <meter> element: The standard element for representing a scalar measurement within a known range.

1<label for="battery-level">Battery Level:</label>
2
3<meter
4    id="battery-level"
5    min="0"
6    max="100"
7    low="20"
8    high="80"
9    optimum="90"
10    value="15"
11>
12    15%
13</meter>

Additional Attributes

The state and range of a meter can be defined using native attributes:

• value: The current numerical value of the meter.
• min: The lower bound of the range (defaults to 0).
• max: The upper bound of the range (defaults to 1).
• low: The upper bound of the "low" range.
• high: The lower bound of the "high" range.
• optimum: The ideal value within the range.

Semantics and Structure of a Custom Meter

A custom meter is a readonly widget that represents a range and a value without using the native HTML <meter> element.

1<div class="meter-container">
2    <span id="disk-label">Disk Space Usage</span>
3
4    <div
5        role="meter"
6        aria-labelledby="disk-label"
7        aria-valuemin="0"
8        aria-valuemax="500"
9        aria-valuenow="450"
10        aria-valuetext="450GB used of 500GB total (Critical)"
11    >
12        <div class="meter-track">
13            <div class="meter-fill critical" style="width: 90%;"></div>
14        </div>
15    </div>
16</div>

A custom meter can be constructed with an <img> element, an <svg> element, or any generic HTML element, using JavaScript to relate its properties to a metered value. To be accessible, the custom element should have role="meter" along with ARIA attributes as outlined in the following.

ARIA

For custom meter components, ARIA attributes are required to convey the element's role and numerical state to assistive technologies:

• Role: The component must have role="meter" to identify it as a gauge or measurement control.
• Value Attributes:
  • aria-valuenow: The current value of the meter.
  • aria-valuemin: The minimum value of the range.
  • aria-valuemax: The maximum value of the range.
• Value Text: Use aria-valuetext to provide a human-readable string representation of the value (e.g., "80% full" or "Critical") if the numerical value alone is not descriptive enough.
• Labeling: Ensure the meter has an accessible name using aria-label or aria-labelledby.

Relationships

A meter must be programmatically associated with a label to ensure that users of assistive technology understand the context of the measurement. When a text label is presented, the accessibility label should be set through a relationship between the text label and the meter using one of the following methods:

• For an HTML <meter> element, use the <label> element with a for attribute matching the meter's id to wrap the visible label.
• On either a <meter> element or a custom meter (a generic element with role="meter"), set the attribute aria-labelledby with the id of the visible label.

If a visible label is not provided, provide an appropriate label with the aria-label attribute on either a native or custom meter element.

Operation

Pointer operation

A user should be able to see the visual state of the meter change as the underlying value changes. While meters are typically read-only, if they are part of an interactive dashboard, clicking them should not trigger unexpected actions unless clearly labeled.

Keyboard operation

• Focus: Meters are typically not focusable unless they are interactive or provide additional information on hover/focus. If focusable, they must be reachable via the Tab key.

• Announcement: When a meter receives either keyboard or virtual focus, a screen reader should announce its label and its current value and range.

Tests

Element has incorrect role

The ARIA role attribute must be explicitly set to meter for all custom meter elements to ensure assistive technologies correctly identify the component.

Missing contextual labeling

A meter without a label is a "silent" graphic. Ensure every meter has a clear accessible name so users know what is being measured (for example., "CPU Usage").

Missing range attributes

Custom meters must include aria-valuenow, aria-valuemin, and aria-valuemax. Without these, screen readers cannot communicate the scale or the current status of the measurement to the user.

For native meters, include the value, min, and max attributes. Without these, screen readers will resolve to the default values to communicate the scale or the current status of the measurement to the user, which might not be meaningful for some implementations.

Avoid using aria range attributes on a native meter as they may conflict with the implicit default values of the meter and create a confusing experience for screen reader users.

Range Logic Errors

Several critical errors can occur if the numerical range is defined incorrectly:

• Min value is greater than the max value: The aria-valuemin must be less than aria-valuemax.
• Range has equal min and max values: A range requires a difference between the minimum and maximum to be valid.
• Value out of range: The value must fall within the bounds of min and max.

Meaningful aria-valuetext

Assistive technologies often present aria-valuenow as a percentage. If conveying the value only in terms of a percentage would not be user friendly or sufficient, the aria-valuetext property must be set to a string that makes the meter's value understandable. For example, a meter for a temperature gauge might convey its value as aria-valuetext="Current temperature is 75 degrees Fahrenheit".

Note: For meters, aria-valuetext should only be used to supplement the numerical value. The numerical aria-valuenow, aria-valuemin, and aria-valuemax attributes must always be included for custom meter components.

Nested interactive elements

Avoid nesting buttons or links inside the meter container. This disrupts the focus order and may cause screen readers to ignore the nested elements or the meter itself.

Avoid aria-owns

While aria-owns can define a parent-child relationship between elements that are not nested in the DOM, it is often poorly supported by assistive technologies and can lead to a confusing reading order. It is best to use standard DOM nesting.

Component does not support disabled state

Meters are typically read-only status indicators and do not inherently support a disabled state like interactive controls do. The disabled attribute should not be applied to the native <meter> element or a custom component with role="meter". If a visual indication of being inactive is necessary, use standard styling and ensure no inappropriate ARIA state is communicated.