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-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.
(some portion of) completion of a task
(“you have complete 30% of tasks”); whereas,
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
meter elements and the progressbar and meter ARIA roles?
meterelement with aria labelledbys and description and most other HTML valid attributes
progresselement and recommended aria- attributes
divwith 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))
divelement with a progressbar role and just aria-valuetext
divelement 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
divelement 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
divelement 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)