Notes on Implementation
We do use Bootstrap’s Spinner component, but adjust the duration and number of iterations so the movement is slower and is completed in under 5 seconds.
According to the Understanding Docs for WCAG Success Criterion 2.2.2: “A preloader 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.”
Describing a Loading Progress
- The element containing the spinner should have an accessible name to describe what is happening (such as “Loading…” as in examples below). The
sr-onlyclass can be used to hide this description from visual users.
- Add the
aria-busyattribute to the loading region and set it to true.
- Update or remove this announcement once the loading is complete.