Intelligence Community Design System

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.

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.

The loading indicator component has been based on the following resources:

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.