Meter and Progress Bar

The HTML progress tag inherits the progressbar role. The HTML meter element, on the other hand, inherits no role in ARIA 1.1, though 1.2 does have a meter role. Both elements are supposed to support all global aria- attributes. Both roles also have attributes specific to them (aria-valuemax, aria-valuemin, aria-valuenow), and progress has aria-valuetext, similar to the range/slider control, though both progressbar and meter are read only).

The two elements are supposed to be used to indicate different scenarios. progress indicates (some portion of) completion of a task (“you have complete 30% of tasks”); whereas, meter is a guage indicating the scalar or fractional amount within a known range (“2GB of 10GB storage used”).

What is the screen reader support for the progress and meter elements and the progressbar and meter ARIA roles?

Example 1: A `meter` element with aria labelledbys and description and most other HTML valid attributes

Example 2: A `progress` element and recommended aria- attributes

Example 2.1: A `div` with progressbar role and recommended aria- attributes (as in example 2, but with usage of role instead of the element, and including aria-label for a name (to satisfy axe))

Example 3: A `div` element with a progressbar role and just aria-valuetext

Example 4: A `div` element with a progressbar role, aria-valuemin, aria-valuemax, and aria-valuenow, and aria-label used for accessible name, since it appears to be better supported

Example 5: A `div` element with a meter role, aria-valuemin, aria-valuemax, and aria-valuenow, and aria-label used for accessible name, since it appears to be better supported

Example 6: A `div` element with a progressbar role, aria-valuemin, aria-valuemax, and aria-valuenow, aria-valuetext and an aria-label (doubling-up on the name/value, to attempt wider AT support)

Meter and Progress Bar

Example 1: A meter element with aria labelledbys and description and most other HTML valid attributes

Example 2: A progress element and recommended aria- attributes

Example 2.1: A div with progressbar role and recommended aria- attributes (as in example 2, but with usage of role instead of the element, and including aria-label for a name (to satisfy axe))

Example 3: A div element with a progressbar role and just aria-valuetext

Example 4: A div element with a progressbar role, aria-valuemin, aria-valuemax, and aria-valuenow, and aria-label used for accessible name, since it appears to be better supported

Example 5: A div element with a meter role, aria-valuemin, aria-valuemax, and aria-valuenow, and aria-label used for accessible name, since it appears to be better supported

Example 6: A div element with a progressbar role, aria-valuemin, aria-valuemax, and aria-valuenow, aria-valuetext and an aria-label (doubling-up on the name/value, to attempt wider AT support)