Do simple animated graphics violate the Web Content Accessibility Guidelines (WCAG)?
Animations can add visual flair to your website, but they can also create problems for people with disabilities. This is true even when animations are purely aesthetic — they don’t change anything about the user interface, and they’re not important for understanding the content.
The relevant requirement can be found in WCAG Success Criterion 2.2.2, “Pause, Stop, Hide,” which reads, in part:
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential …
That seems fairly straightforward: If a web animation lasts for more than five seconds, you need to give users a way to pause the animation.
You might argue that animations don’t qualify as “information,” so WCAG doesn’t technically apply here — but remember, your goal is to create an accessible website, not to meet the bare minimum thresholds necessary for WCAG conformance. If a web design decision might frustrate your users, you should fix it.
Below, we’ll explain how repetitive animations affect users with disabilities and provide a few tips for using animations in an accessible (and aesthetically pleasing) way.
Web animations create a sense of motion, which can lead to accessibility concerns
Designers want to build beautiful, eye-catching websites, but it’s important to consider the preferences of all users when creating visual content. Moving content is designed to draw the user’s attention, which isn’t always a good thing.
For example, let’s say that you’re building an eCommerce website. On a product page, you include a cartoon that shows a person using the product.
Depending on the implementation, the animation might run constantly, which might make it difficult to read the text. That’s particularly true for people who use screen magnifiers or users with attention disorders. Certain animations can also cause issues for screen reader users.
And if your animation is especially distracting, it might annoy all users, regardless of their abilities. Remember, animations draw attention. If a person is working in a shared space, they may not appreciate moving graphics (which might cause coworkers to look over at their screen).
This isn’t to say that you cannot use animations — you’ll simply need to think about accessibility when building them into your content.
Related: Make Your Digital Media More Accessible By Providing Options
Give users the option to pause your content
If you’re using animations extensively, you might have concerns that adding player controls will ruin your website’s aesthetic.
Here’s the good news: WCAG requires “a mechanism" for pausing, stopping, or hiding the content, but the guidelines don’t include specific requirements for what that mechanism looks like.
Technically, WCAG doesn’t even require a visible interactive control (though you should still provide one, since a visual control will inform some users that the animations can be disabled).
That gives you quite a bit of leeway:
- You could implement the controls as a simple pause button (Apple’s website uses that approach — scroll to the bottom of the iPhone product page to see an example).
- With some quick CSS, you can also create a simple, aesthetically pleasing button that enables users to turn off all motion. CSS In Real Life has a helpful tutorial for building a motion toggle.
- You can ensure that moving content can be disabled with the “escape" key, which is sufficient for conformance.
You can also fulfill WCAG 2.2.2 by simply configuring the animation to stop moving after a few seconds. In many cases, this is the easiest and most user-friendly option.
Ultimately, while animation can improve the user experience, constant motion tends to be a problem. Use moving graphics sparingly, and they’ll be more impactful (and more accessible).
To learn more about accessible web animations, read: Making Your Web Animations Accessible: 5 Tips. For help with a specific accessibility issue, send us a message to connect with a subject matter expert.
