Progress bar

• Accessibility considerations
• Resources
• Accessibility testing

Accessibility considerations

1. If the progress bar is to show loading of a specific part or region of the application, set aria-busy="true" and aria-describedby="[progressbar-id]" on the related element to ensure assistive technologies can correctly convey this relation to the user.
2. Only hide the label when it is absolutely clear to the user which process the progress bar represents. Note that you are still required to pass an appropriate label which will be read by screen readers.

Resources

• The W3C WAI-ARIA: “progressbar” role guidance covers the usage of ARIA names, state and roles.
• IBM Accessibility Requirements:
  • 1.3.1 Info and Relationships (WCAG Success Criteria 1.3.1)
  • 4.1.2 Name, Role, Value (WCAG Success Criteria 4.1.2)

Accessibility testing

Automated test