Role and semantics
Section titled “Role and semantics”ProgressBar renders role="progressbar" through Base UI Progress. Its name comes from the visible label (aria-labelledby); hideLabel hides the label visually only. When determinate it carries aria-valuenow, aria-valuemin, aria-valuemax and a formatted aria-valuetext; when indeterminate there is no aria-valuenow. The visible percentage is not read, because the value is already part of the bar. The description is linked with aria-describedby.
Keyboard
Section titled “Keyboard”ProgressBar is not interactive and takes no focus.
It takes no focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Determinate | “Uploading file, progress bar, 40%” |
| Custom value | “Transferring files, progress bar, 3 of 10 files, About 2 minutes left” |
| Indeterminate | “Preparing, progress bar” |
Contrast
Section titled “Contrast”The fill reaches at least 3:1 on the track and the label at least 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How ProgressBar meets it | What product teams do |
|---|---|---|
| 4.1.2 Name, role, value | Role, name and value attributes. | Always give a label. |
| 2.3.3 Animation from interactions | The sweep stops under reduced motion. | Nothing. |
| 2.2.2 Pause, stop, hide | The sweep runs only while loading. | Remove the bar or make it determinate when done. |
| 1.4.11 Non-text contrast | The fill reaches at least 3:1. | Nothing. |