Are there concrete guidelines about accessibility in skeleton loaders? How might we design them to be more accessible?


The guideline that comes to mind for me is WCAG 2.1 Success Criterion 2.2.2, which states:

Moving, blinking, scrolling

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;

When an entire screen is loading, the content is not "presented in parallel with other content", but some more asynchronous sites (like social media) do use skeletons at a content area level.

Additionally, screen readers might become tripped up by skeleton loading components and should use ARIA labels. Ray Roman suggests:

Season them with some combination of aria-disabled={true} and aria-label="loading"...


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.