Discussion on: CSS skeleton loading screen animation

[Ashley Sheridan]

Just wanted to mention that while subtle animations like this are a useful UX tool, we also have to be wary of animation use where a user has specifically opted out of them, e.g. for accessibility reasons (people with vestibular problems often disable animations). You can put the animation part of this skeleton into a media query:

@media screen and (prefers-reduced-motion: no-preference) { }

Another aspect of accessibility would be for screen reader users, as they might not necessarily be able to see what's happening visually on the screen. For those people, you can add some additional text (visually hidden) like this:

<div class="video"><span class="visually-hidden">Loading</span></div>

Then you can hide that text visually but make it available to screen readers with CSS like this:

.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: auto;
}