BPOW: Animations are fun, but not for everyone

By August 14th, 2013

Our Best Practice of the Week (BPOW) looks at an often unknown area of accessibility: animations that have an adverse effect on a variety of people. 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.

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.

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');
});

Tagged with: