General
- Ensure the progress circle colour has sufficient contrast
- Always include text that describes what is being measured and the current percentage
- Do not rely on the visual circle alone — provide clear text explanation
- Ensure percentage values are announced to screen readers
- Keep labels concise and descriptive
Web
Semantic markup
- Use ARIA role="progressbar" for the progress circle container
- Include aria-valuenow, aria-valuemin, and aria-valuemax to communicate progress
- Use aria-label or aria-labelledby to describe what is being measured
Accessible labelling
- Use aria-label to describe the progress (e.g., "Profile completion progress")
- Set aria-valuenow to the current percentage value (e.g., 75 for 75%)
- Set aria-valuemin to 0 and aria-valuemax to 100
- Optionally use aria-valuetext to provide a human-readable version (e.g., "75% complete")
- Ensure supporting text (percentage and label) is visible and accessible
Live updates
- If the progress updates dynamically, use aria-live="polite" on the percentage text
- Avoid announcing every small percentage change — update at meaningful intervals
- Screen readers should announce significant progress milestones (e.g., 25%, 50%, 75%, 100%)
Visual indicators
- Ensure the filled portion of the circle has sufficient contrast with the track (minimum 3:1)
- The percentage text should have minimum 4.5:1 contrast against its background
- Use additional visual indicators beyond colour if possible (e.g., checkmarks at 100%)
React Native
- Use accessibilityRole="progressbar" to identify the element
- Provide accessibilityLabel describing what is being measured (e.g., "Profile completion progress")
- Use accessibilityValue to communicate current, minimum, and maximum values
- Ensure supporting text (percentage and label) is accessible to screen readers
- Update accessibility properties as progress changes