Progress
Visual representations of the status of a system process.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Implementing progress indicator components for people who rely on screen readers takes thought and is less intuitive than for most of the other components. There is not a one-size-fits all solution.
- Use
, , or to announce the start and end of a progress indicator. Alerts, status, and aria-live interrupt the user, even when set to “polite”, and could be especially disruptive with progress indicators. - Set timed announcements, such as every 30 seconds or minute, for longer progress indicators.
- Place the progress element near the control prompting it in the DOM so screen reader users can find it easily.
- Don’t give indeterminate progress indicators a
, as they only communicate a process is happening and navigating to them doesn’t yield any additional information. - Use labels and aria labeling attributes with progress indicators as needed. Alerts and live-areas need to be handled with finesse when it comes to their timing.
- Don’t place alerts or live areas inside progress elements, as any content contained in a progress element or an element with
will be given an implicit by the browser and not announced. - Check the linear progress indicator’s native
component. It uses a value attribute which often needs to be converted to a percentage by the developer. - Check the circular progress indicator’s div with the
. It must have an attribute which is updated by the developer.
Determinate vs indeterminate progress behaviors
Determinate
- Linear determinate indicators have a
element with a value attribute. - Circular determinate indicators have
and attributes. - Ensure determinate indicators are located in the DOM near the control that prompted the process. While they’re not in the page tab order, they can be reached with the keyboard when a screen reader is on.
- Ensure progress values are announced only in certain situations, and then in a deliberately timed manner.
Indeterminate
- Ensure indeterminate indicators don’t have roles.
- Ensure they’re announced, although they don’t need to be accessible in the DOM.
Motion sensitivity
- Consider implementing a way to pause animations for indeterminate progress indicators, especially if they’re displayed for a long time.