WCAG 2.3.3: Animation from Interactions

Look, we all want to trick out our websites with cool effects, but sometimes adding complex visual elements can cause problems for user operability, no matter how dope they may be. In our post on WCAG 2.2.2 Pause, Stop, Hide, we discussed animation that initiates automatically on web pages. Here, we’ll talk about animation that a user might trigger.

If your site contains animation that users activate through some interaction with your page, you should ensure there’s a way for the user to deactivate the animation, unless it’s essential to the functionality of the page or the content you’re presenting. This will help users who get nauseated or distracted by animated content, like those with inner-ear disorders. People with these disorders can experience dizziness and headaches, in addition to nausea, caused by such animation.

Parallax Scrolling

One example of an animation caused by user interaction is parallax scrolling. This is when the background moves at a different rate to the foreground in order to create a sense of three-dimensionality. You’ve likely seen it as a feature of some web design templates. The first twenty seconds or so of the following video includes an example.

It’s worth noting that normal page scrolling does not fall under this rule, since the page’s movement is entirely under the control of the user. In this case, it’s that the background moves at a different rate that causes the issue.

Essential Animation

The friendly folks over at WCAG recommend that you avoid unnecessary, or “nonessential”, animation triggered by user interaction. That’s the best way to make sure you don’t make anyone feel sick (at least, none more than you usually do).

As the content author of your own website, judging whether or not an animation is essential rests on you, so try to use your best judgement and err on the side of caution. We should note, unfortunately, that a cool animation of a guitar-playing panda on your landing page is probably not essential.