Accessible Progress Indicators

The HTML5 <progress> element provides built-in accessibility. Use value and max attributes for determinate progress, or omit value for indeterminate progress. Always provide an aria-label or visible label describing what is progressing.

For custom progress bars, use role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. Use aria-label or aria-labelledby to describe what is progressing. For indeterminate progress, omit aria-valuenow.

For real-time progress updates, use aria-live="polite" to announce changes without interrupting the user. Update aria-valuenow and aria-valuetext as progress changes. Use aria-valuetext to provide more descriptive updates than just the percentage.