Progress | Lime design system

Examples

Vacation fund$640 of $1,000

64%x

When to use it

7 rules

Must: Pass label naming what is measured, such as "Saved toward Vacation fund". Because a meter with no name is read as a bare number with nothing to say what it measures.
Must: Pass valueText for money, such as "$640 of $1,000". Because without it a screen reader hears "64%" and never the amount.
Must: Show the figure as text beside a bar or inside a ring. Because the bar renders no text, so a sighted person guesses the amount from the fill length.
Should: Pass the real max and value, such as 640 of 1000, not a percentage you worked out.
Should: Leave the sm ring empty; 40px has no room for a figure, so put it beside.
Never: Use it for a task that is running; it has no indeterminate state. Because it is role meter, so a reader hears a fixed amount while nothing tells them work is moving.
Never: Recolor the fill per goal or turn it red past a limit; say over budget in words. Because the fill clamps at max, so a red bar cannot show how far over and fails color-blind readers.

4 checks

: The root is role meter with aria-valuenow, aria-valuemin, aria-valuemax and the label as its name.
: valueText becomes aria-valuetext, so money is read as money.
: The lime fill has an olive edge, 3.95:1 on the page, so the filled part reads on grey.
: The ring and the bar are hidden from assistive tech; the figure inside a ring is read as text too.

6 edge cases

6 props

9 tokens