Styled Meter

Pattern Details

<p>
  Test 1

  <meter class="meter"
    low="64"
    high="80"
    max="100"
    value="84"></meter>
<p>

The meter element, like the progress, is a non-interactive form element that is meant to indicate a current value, within a known range, much like a gauge. For example, a meter would be the semantically appropriate element to indicate the status of a finite storage limit for a DVR, email or web storage limit.

The meter element can be styled by use of the following selectors:

meter

Styling with the element selector is respected by all browsers without the need for appearance: none;. Though Firefox and Webkit / Edge browsers differ a bit in how styling the element will either affect the "background" of the element, or the visual indicator of the meter's value.

::-moz- and ::-webkit-meter-bar

Firefox uses this selector to style the visual indicator of the meter's value. Webkit seems to use this to style the "background" of the element.

::-webkit-meter-optimum-value
:-moz-meter-optimum::-moz-meter-bar

Styling for the optimum value of the element.

::-webkit-meter-suboptimum-value
:-moz-meter-sub-optimum::-moz-meter-bar

Styling for a suboptimal value of the element.

::-webkit-meter-even-less-good-value
:-moz-meter-sub-sub-optimum::-moz-meter-bar

Styling for a less than suboptimal value for the element.

Affects on Screen Reader Announcements?

The meter element has no support in Internet Explorer, but is supported in Microsoft Edge. The element has different levels of support in other major browsers, and screen readers can vary quite a bit in how they interpret the element, if at all.

JAWS 2018 + Edge (latest) and Firefox 63 (nightly)

JAWS will completely ignore the existence of meter elements, regardless of if they are styled or not.

JAWS 2018 + Chrome (latest)

Chrome + JAWS will announce both styled and unstyled meter elements and their current value, with no indication of their low, high, or max values. If a meter is provided an accessible name by aria-label or aria-labelledby, it will be completely ignored by JAWS.

NVDA 2018.2.1 + Edge (latest)

NVDA will announce a styled meter as progress bar [current value].

NVDA will not announce an accessible name for the meter, so aria-label and aria-labelledby are ignored.

NVDA 2018.2.1 + Firefox 63 (nightly)

NVDA will announce nothing but the accessible name to meter elements, regardless of if they are styled or not.

NVDA 2018.2.1 + Chrome (latest)

Chrome + NVDA do not have issues with announcing styled meters unless they are given an accessible name via aria-label or aria-labelledby. Doing so will result in NVDA only announcing the accessible name and none of the meter's current state.

VoiceOver + Safari 11.1.1 & 12.0 on macOS High Sierra

VoiceOver will completely ignore a styled meter element unless it has an accessible name set by aria-label or aria-labelledby. But even then, VoiceOver will only announce the accessible name and none of the meter's current state.

VoiceOver + Safari on iOS 11.4 & 12.1

VoiceOver will completely ignore the existence of meter elements, regardless of if they are styled or not.

TalkBack (Android Accessibility Suite 6.2) + Android Chrome

Chrome + TalkBack will completely ignore meter elements without an accessible name provided by aria-label or aria-labelledby. However, even when focusing such an instance, TalkBack will announce [accessible name], meter with no further announcements of the current values of the element.

Usage note:

As with the progress element, the meter element can be restyled with some browser prefixed selectors, but doing so can have significantly adverse affects on how the elements are interpreted by screen readers. Coupled with the fact that Internet Explorer 11 doesn't support meter at all, and even the unstyled element doesn't have the best screen reader support in the browsers that do render it, it's probably best to not rely on this element alone (or at all).