Expressive Progress Bar Accessibility
Best Practices
The animated bar element must use role="progressbar" with an aria-label that describes the loading activity (e.g., "Loading...").
When optional status messages are present, each visible message must render inside an element with role="status" so assistive technology announces new content as it cycles into view. The progress bar element must use aria-describedby to reference the status message, giving context to the loading state.
When cycling multiple messages with animation, a duplicate visual-only message element is used for the transition effect. This duplicate must use aria-hidden="true" so the message is not announced twice.
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
Expressive 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 with its aria-label value and the progressbar role.
When status messages are present, new message content will be announced automatically via role="status" as messages cycle into view. The visual-only duplicate message is hidden from assistive technology and will not be announced.
Pointer
Expressive progress bar elements are not interactive by default and therefore are not clickable.
Reduced Motion
When prefers-reduced-motion is active, the bar lines stop resizing and scroll at a slower pace instead. Message transition animations are removed; content fades in or updates in place.
Implementations must respect this preference. The component's CSS handles the visual changes automatically, but JavaScript-driven message cycling should also skip animated transitions when reduced motion is preferred.
ARIA Reference
| Attribute | Description |
|---|---|
| role="progressbar" | Applied to the animated bar element to identify it as a progress indicator to assistive technologies. |
| aria-label | Applied to the progress bar element to provide the accessible name for the loading state. |
| aria-describedby | Applied to the progress bar element to reference the status message, providing additional context about the loading activity. |
| role="status" | Applied to the element that holds the visible status message so assistive technology announces new content as it appears. |
| aria-hidden="true" | Applied to the duplicate visual-only message element used for animation so the message is not announced twice. |