Day 1: Skeleton Loaders + Accessibility
This week, I was asked to provide accessibility acceptance criteria for “skeleton loaders.” Basically, instead of making you wait and stare at a blank screen, a skeleton loader shows you a rough outline or a basic structure of where the pictures and text on a site will populate. It’s like a preview that helps you understand that things are happening behind the scenes and gives you a sense of what’s about to appear. Skeleton loaders should only be used for content that can load in under 10 seconds (if it’s more than 10 seconds, use a progress bar instead). Personally, I would rather have content load faster than have to endure an abstracted screen akin to a brief shiny gray purgatory, but nobody asked for my opinion.
Here are some references I used when looking into skeleton loaders and their accessibility considerations:
I narrowed the information down to four key notes for my team of engineers to consider:
- Since the skeleton is a visual element, ensure that image replacements are marked as decorative (using aria-hidden=“true”) and hidden from screen reader users.
- The skeleton is not focusable via keyboard.
- Avoid using heading markup for skeleton “bones” that replace headings.
- Set aria-busy=“true” until loading is complete. Then set to aria-busy=“false.”
- Avoid content that flashes more than three times per second.
There are additional points that I weighed but ultimately omitted. Since skeleton loaders typically animate (creating a shimmery gradient-y wave effect) to indicate that there’s activity behind the scenes, what does that mean for those who get distracted by animations (or worse, have animation-induced epilepsy)? I had my designer make the color contrast between the gray skeleton “bone” and the wave color that courses through each bone very low to minimize distraction. And it’s not like anyone who can’t pick up on that subtle animation is really missing any crucial information, so I figured it would work just fine for those with low vision, those with poorly calibrated monitors, etc.
I will update this post if I hear any updates from my engineering team upon implementation.