General
- Ensure sufficient colour contrast for all step indicators
- Do not rely on colour alone to indicate step status; use icons and shapes too
- Provide clear text labels or descriptions for the current step
- Make navigation between steps keyboard accessible
- Announce step changes to screen readers
Web
Semantic markup
- Use <ol> (ordered list) to mark up progress steps, as the sequence matters
- Use ARIA role="progressbar" or custom ARIA attributes to communicate progress
- For clickable steps, use <button> or <a> elements within list items
- Provide clear, accessible labels for each step
Accessible labelling
For Steps 1-5 (with labels):
- Use aria-current="step" to indicate the current active step
- Completed steps can use <button> for clickability
- Future steps can use <span> or disabled buttons
For Steps 6 or more (without labels):
- Provide aria-label on each step indicator
- Use aria-current="step" for the active step
- Include text label indicating "Step X of Y"
Live updates
- Use aria-live="polite" to announce step changes to screen readers
- Announce both the step number and label when moving between steps
- Example announcement: "Step 2 of 5: Contact information"
Keyboard navigation
For Steps 1-5:
- Users should be able to Tab through clickable steps
- Enter or Space should activate a step button
- Focus indicators must be clearly visible
For Steps 6 or more:
- Navigation buttons (Previous/Next) must be keyboard accessible
- Tab order should be logical (progress indicator, then navigation buttons)
React Native
- Provide appropriate accessibility labels for the progress component
- Use accessibilityRole="progressbar" or equivalent for the container
- Announce the current step number and total steps
- For clickable steps, ensure they have accessibilityRole="button"
- Update accessibility announcements when steps change