General
- Ensure sufficient colour contrast between the progress bar fill and track
- Do not rely on colour alone to convey progress — always include text showing the percentage or completion status
- Labels must clearly describe what process is in progress
- Keep label text concise and easy to understand
Web
Semantic markup
- Use the <progress> element or ARIA role="progressbar" for progress bars
- Include both the value and max attributes to indicate current and total progress
Accessible labelling
- Use aria-label or aria-labelledby to associate the descriptive label with the progress bar
- Use aria-valuenow to indicate the current progress value (e.g., 45 for 45%)
- Use aria-valuemin (typically 0) and aria-valuemax (typically 100) to indicate the range
- Optionally use aria-valuetext to provide a human-readable version of the progress (e.g., "45% complete")
Live updates
- Use aria-live="polite" on the percentage text to announce progress updates to screen readers
- Avoid announcing every single percentage change — update at meaningful intervals (e.g., every 10%)
- Screen readers should announce completion when the process finishes
React Native
- Use accessibilityRole="progressbar" to identify the element
- Provide accessibilityLabel describing the process (e.g., "Uploading document")
- Use accessibilityValue to communicate current, minimum, and maximum values
- Update accessibility properties as progress changes
- Ensure the label and percentage text are both accessible to screen readers