Recent updates to CSS and JavaScript have made it really easy to implement fun, engaging animations on a web page. Be it CSS transitions or keyframes, or the latest jQuery SVG animation framework, one thing to keep in mind is your animation may make the user uncomfortable. Depending on the type of animations you use, you could trigger an attack that causes the user to suffer mild to severe vertigo, nausea, headaches or even seizures. People with cognitive issues could become confused and distracted from your content and unable to proceed to the goal of the site. Animated interfaces can cause headaches, nausea, dizziness, and other health problems for many people. The most affected groups are people with vestibular disorders, epilepsy, and migraine sensitivities. However, anyone can experience similar issues if subjected to excessive motion on the screen for a longer period of time. Flickering and flashing animations can also trigger seizures in people with photosensitive epilepsy.
This certainly doesn’t mean that you can’t use animations at all if you care about accessibility. Let’s look at some best practices you can implement to address the needs of users who experience problems from animated interfaces.
1. An option to turn off the animation
The easiest way to combat this is giving the user the ability to turn off the animation. You can do this by making sure the static state of the site’s CSS is the one you want the user to see when the animation is complete. Next, tie all animations to an .animate class applied to the body. Here is some pseudocode to demonstrate:
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}
.widget {
width: 100px;
height: 100px;
background: red;
}
.animate .widget {
animation: mymove 5s infinite;
}
$('.animate .widget').animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function(){
//Animation callback
});Then provide a link near the top of the page to turn the animation off:
<a href="#" id="animationSwitch">Turn off animation</a>
$('#animationSwitch').on('click', function(e){
e.preventDefault();
$('body').toggleClass('animate');
});2. Relative size of motion to viewport
Small animated elements such as a button that slightly changes color on hover won’t be much of a problem. Animations that cover a huge area of the screen are the real offenders you need to be careful about. When designing an animation always think about the relative size of movement to the screen.
The higher this ratio is the more people will be triggered by the animation. This rule applies to mobile interfaces as well. An animation that looks relatively small on desktop can cover half of the screen on a mobile device.
3. Parallax scrolling
The concept of parallax scrolling (and its inherent problem) is that the foreground and background move at a different speed. When it’s done drastically, parallax scrolling is a good example of large-scale animation that might cause the symptoms mentioned before. You can still use subtle parallax effects if you want, but there are a number of behaviours you should avoid by any means.
“Scrolljacking”, first and foremostly. This is when the scrollbar is manipulated to behave independently of the user’s efforts and intents. It’s not a nice experience to begin with. But, when combined with parallax scrolling, the animated background begins to move at its own speed and your website becomes basically unusable for people with vestibular disorders.
Also avoid horizontal scrolling when using parallax effects. Horizontal scrolling on a website is a surprise to most users and not always a pleasant one. As a general rule of thumb, always think carefully about surprising movements on the screen: they tend to make people with balance problems lose direction and the symptoms ensue.
4. Limited duration of animations
Animations which happen too quickly can also be troublesome for users with accessibility needs (and probably anyone who wants to process the presented information). Luckily, CSS makes it possible to control the duration of both animations and transitions.
To set up time limits, you can use the animation-duration and transition-duration properties. Their usage is pretty straightforward. For instance, the following code gives 2 seconds for a transition animation to complete:
div {
transition-property: width;
transition-duration: 2s;
}Or, the same with the transition shorthand property:
div {
transition: width 2s;
}The ideal duration of time depends on the relative size of the animation to the screen. What is okay for a smaller animation might be too fast for a larger one. It can be a good idea to use different durations for different viewport sizes as well.
Iteration Count
You can also define the number of times an animation cycle is played. This feature is only available for keyframe animations, as transitions don’t loop; they run only once. You can use the animation-iteration-count property in the following way:
div {
animation-iteration-count: 3;
}You can set infinite as the value for animation-iteration-count, however infinite loops are not very good for accessibility. Especially, if you don’t provide any way for users to stop or pause the animation whenever they choose.
5. Using HTML videos instead of animated GIFs
Animated GIFs are extremely popular these days; websites use them all the time. However, their impact on accessibility is barely ever questioned and is actually quite disturbing. Accessibility issues get especially nasty when a website uses several animated GIFs on the same page. Just think about list-type articles in which each item is decorated with a separate GIF animation, frequently moving in all kinds of unpredictable directions.
The problems with animated GIFs are auto-playing, infinite looping, and the lack of user control, to be precise. Google Developers also cite performance problems (animated GIFs can be really huge, like 13.7 MB in the analyzed example). One of the possible solutions is replacing them with HTML videos that run natively in all modern browsers.
There are a number of tools (e.g. FFmpeg) you can use to convert animated GIFs into different video formats. HTML5’s video tag allows you to define multiple sources for an embedded video. You can use three video formats: MP4, WebM, and Ogg. MP4 has the best browser support, however WebM is somewhat smaller in size.
For instance, after converting an animated GIF to MP4 and WebM formats, you can use the following HTML:
<video controls width="300">
<source src="image.webm" type="video/webm">
<source src="image.mp4" type="video/mp4">
Sorry, your browser doesn’t support embedded videos.
</video>By using HTML videos instead of animated GIFs, you enable users to stop or pause the animation or opt out of watching it at all. Plus, you significantly improve page load time which is also an important metric of accessibility, especially because of mobile users and people in low connectivity areas.