Accessibility

Accessible loading spinner requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.1.1 Text alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language

1.4.3 Minimum contrast

Ensure that text elements (like "Loading...") meet the minimum contrast ratio of 4.5:1 against their background to aid users with visual impairments in seeing the spinner clearly W3C (2018). When integrated into another component, such as a button, make sure that the active indicator element provides visual contrast of at least 3:1 against the other component (Google, n.d).

2.3.1 Three flashes or below threshold

For users sensitive to motion (such as those with vestibular disorders), ensure that the spinner's animation is smooth and does not include rapid or flashing movements. WCAG recommends avoiding anything that flashes more than three times per second W3C (2018).

4.1.3 Status messages

Use ARIA roles to ensure the accessibility of status messages associated with loading processes. For instance, adding role="status" to a visually hidden text element that updates with "Loading..." or "Content is loading" during spinner activation makes these status updates perceivable to screen reader users without requiring user focus W3C (2018).

Understanding WCAG guideline 2.2.2 Pause stop and hide

A pre-loader animation is shown on a page which requires a certain percentage of a large file to be downloaded before playback can begin. The animation is the only content on the page and instructs the user to please wait while the video loads. Because the moving content is not presented in parallel with other content, no mechanism to pause, stop or hide it needs to be provided, even though the animation may run for more than 5 seconds for users with slower connections (W3C, 2023).