Meter

Overview

Project lead: Paul Jackson (@pjackson28)

Purpose

The HTML5 meter element displays a scalar measurement in a known range. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

Rationale

Browsers that do not support the meter element natively ignore the meter functionality and therefore, nothing would be displayed. This polyfill ensures that the meter is displayed and the necessary information is exposed to assistive technologies by adding ARIA.

Implementation

To use the polyfill, the standard meter element must be used. In cases where a browser doesn't support this element, the polyfill is automatically loaded.

Parameters

The meter polyfill accepts the same six parameters as the HTML5 meter element.

Example code

Working examples

Normal

<meter min="20" value="65" max="80">75% (normal)</meter>

Too high

<meter min="0" value="90" max="100" high="80">90% (too high)</meter>

Too low

<meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter>

Examples

Development

Meter is dependent upon native support for the HTML5 meter element or the meter polyfill.

Known issues

There are no known issues at this point in time.

Version history

References