Progressbar

Pattern

A progressbar shows progress towards a goal — a file upload, a long-running computation, a multi-step process. Indeterminate progressbars (no known total) use only role; determinate ones include current and bound values.

Roles

• progressbar

States and properties

aria-valuenow

Current progress.

aria-valuemin / aria-valuemax

Bounds (typically 0 / 100 for percent).

aria-valuetext

Human-readable text (optional).

WCAG criteria

• 4.1.3 — Status Messages

Canonical reference

WAI-ARIA Authoring Practices Guide — Progressbar

More

• All patterns
• WidgetPatternAnalyzer — the analyser that validates these patterns.
• Back to Paradise