Role and semantics
Section titled “Role and semantics”- The root has
role="meter"(Base UI Meter).aria-valuenow,aria-valueminandaria-valuemaxgive the value and the range. - The name comes from the label:
aria-labelledbypoints to it.labelHiddenhides the label visually only. aria-valuetextcarries the formatted value (“64%”, “32 GB”).valueTextreplaces it.- With
tone="auto"a word naming the region is added to the value text: “92%, high”, “30%, optimal”. Colour never carries the meaning alone. With a fixed tone no word is added; give the meaning in text yourself. - The visible value is
aria-hidden, so screen readers do not read the same information twice. - A
descriptionis linked witharia-describedby. - In forced-colours mode the track gets a 1 px system outline and the fill uses the highlight colour.
Keyboard
Section titled “Keyboard”Meter is static and takes no focus; it has no keyboard interaction.
Meter has no focus ring; it is read only.
Screen reader output
Section titled “Screen reader output”| Example | Read |
|---|---|
| Default | “Storage, meter, 64%” |
auto, quota 92 (low is best) |
“Quota used, meter, 92%, high” |
auto, quota 30 |
“Quota used, meter, 30%, optimal” |
| With a unit | “Storage, meter, 32 GB” |
| With a description | Then “Last updated today.” |
The words follow the Provider language through library strings (ui.meter.*); replace all of it with valueText.
Contrast
Section titled “Contrast”The ratio between fill and track is at least 3:1 in every brand and mode (WCAG 1.4.11); values are computed from the bigbang and fixture token output. Text is at least 4.5:1.
| Pair | Light mode | Dark mode |
|---|---|---|
color-status-brand-emphasis / color-surface-sunken |
5.71:1 | 8.51:1 |
color-status-neutral-emphasis / color-surface-sunken |
6.13:1 | 7.51:1 |
color-status-success-emphasis / color-surface-sunken |
4.65:1 | 7.84:1 |
color-status-warning-emphasis / color-surface-sunken |
4.36:1 | 8.41:1 |
color-status-danger-emphasis / color-surface-sunken |
5.21:1 | 6.47:1 |
color-text-default / color-surface-default |
16.16:1 | 17.18:1 |
color-text-subtle / color-surface-default |
8.77:1 | 10.27:1 |
The track has a low ratio against the page surface; the track carries no information, the value reads from the fill and the text.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Meter meets it | What the product team does |
|---|---|---|
| 1.1.1 Non-text content | The bar has an equivalent in aria-valuetext. |
Give a full phrase with valueText when needed. |
| 1.3.1 Info and relationships | role="meter", name and description are linked. |
Never leave the label empty. |
| 1.4.1 Use of colour | With auto the region is also read as a word. |
With a fixed tone, give the meaning in text too. |
| 1.4.11 Non-text contrast | The fill is at least 4.36:1 against the track. | Do not pass custom colours. |
| 4.1.2 Name, role, value | Name, role and value are programmatic. | If the value leaves the range, check the data. |