Loading indicator
Loading indicator
Easy to use for everyone
Clear labels help convey that a process/component is loading.
We have ensured the loading indicators meet accessibility guidance around colour, speed and movement. Loading indicators should not flash, as this can be problematic for users with particular accessibility needs.
For Assistive Technology
Loading indicators use thearia-live
attribute to tell screen reader users that there is dynamic content on the page.aria-busy
tells assistive tech that the container is getting new content.aria-busy
will be false when the container isn't refreshing and will be equal to true when the content is reloading.
aria-live
takes three attributes:off
,polite
andassertive
. While polite doesn’t interrupt the screen reader if other content is being read, assertive will immediately read out the element’s content. Loading indicators use assertive to ensure screen reader users are provided with the same information as other users.
Based on
The loading indicator component has been based on the following resources:
-
Accessible Loading Indicators—with No Extra Elements! , James Steinbach, accessed March 2022. -
Loading: Accessibility , IBM, accessed March 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.