Skeleton
Skeleton
Easy to use for everyone
The component relies on CSS to be displayed before JavaScript is loaded on the page.
For Assistive Technology
A user should be notified that content is loading. Skeletons use thearia-busy
to tell assistive technologies that the container is loading. Aria-busy will be false when the container isn't refreshing and will be equal to true when the content is loading.
Given that few screen readers comply witharia-busy=”true”
, we need to invokearia-hidden=”true”
to hide the busy content.
Skeleton components shouldn’t be focusable.
Based on
The skeleton component has been based on the following resources:
-
Short note on being busy , Steve Faulkner, accessed April 2022. -
More Accessible Skeletons , Adrian Roselli, accessed April 2022. -
Accessible Loading Indicators—with No Extra Elements! , James Steinbach, 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.
Future research planned
To meet WCAG 2.2 Success Criterion 2.2.2 we need to include a mechanism to stop “any moving, blinking or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content”. As the animation is subtle and less than one second we don't need to provide this.
However, we could do further research into potential scenarios where it could be beneficial for specific users, and how to invoke the pausing pattern without affecting the general experience.