Progress Bar Accessibility
Best Practices
The progress bar uses the native <progress> element, which provides built-in accessibility support.
The value and max attributes must be set to reflect the current completion status. When value is omitted, the browser shows a generic animation: work is in progress, leading to unknown duration.
Text content inside the <progress> element must accurately represent the current progress percentage.
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
Progress bar elements are not interactive by default and therefore should not be keyboard focusable.
Screen Reader
A screen reader will announce the progress bar role and current completion percentage.
For dynamic progress updates, consider using aria-live="polite" on a companion status text element to announce progress changes without interrupting the user. Avoid announcing every incremental change—limit announcements to meaningful milestones.
Pointer
Progress bar elements are not interactive by default and therefore are not clickable.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-label | Applied to the progress element when a visible label is not present. Describes what task is in progress. |
| aria-labelledby | Applied to the progress element to reference a visible heading or label that describes the task. |
| aria-live="polite" | Applied to a companion status text element (not the progress bar itself) to announce progress updates to screen readers without interrupting the user. |