To create an intuitive user interface (UI), you might decide to use animation to draw attention to certain elements or to visually explain how they work. From a digital accessibility perspective, that’s perfectly okay; creative visual design can make your product more intuitive.
However, you need to think about all of your users. Some people might be distracted by animated controls. Moving buttons or flashing content could prevent people from using your content — or even cause physical symptoms like headaches and seizures, depending on the implementation.
Here’s how to incorporate UI motion into your product without introducing accessibility barriers.
Make sure that automatic animations can be paused, stopped, or hidden
The Web Content Accessibility Guidelines (WCAG) addresses UI motion in Success Criterion (SC) 2.2.2, “Pause, Stop, Hide.” That requirement:
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 …
Let’s apply that criterion to a few common examples of UI motion:
- An educational website presents the user with a video, which has a play button that animates to prompt the user to press it. The animation stops within five seconds, so it fulfills WCAG 2.2.2.
- A website plays multimedia automatically as the page loads (note: please do not use autoplay for any reason). The media player has a pause button, so it technically fulfills WCAG 2.2.2.
If a UI element blinks or flashes, you should also make sure that it conforms with WCAG SC 2.3.1, “Three Flashes or Below Threshold.” That criterion prohibits web pages from containing “anything that flashes more than three times in any one-second period,” with exceptions for flashing content that is below the general flash and red-flash thresholds.
Related: Does WCAG 'Pause, Stop, Hide' Apply to Simple Animations?
If motion occurs with interactions, offer options
What about a website with parallax motion — motion that only occurs when the user performs an action (for example, scrolling down through a page)?
For these situations, we need to look at WCAG SC 2.3.3, “Animation from Interactions.” This is a Level AAA criterion, so it’s not strictly necessary for compliance with digital accessibility laws — but as we’ve discussed in other articles, Level AAA criteria are still worth your attention, particularly when your goal is inclusive design.
Per WCAG 2.3.3:
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
If you’re implementing parallax motion or any other animation that moves with the user, you should provide a way to turn off the animation. At the very least, you should implement the animation with CSS and make sure that your page supports the prefers-reduced-motion CSS property.
Before using motion, think about whether it's appropriate for the use case
The safest course of action is to avoid motion unless you have a practical reason to do otherwise. You want your UI to be intuitive and simple; people should be able to navigate, interact, and find information without fighting with your website or app.
Before using animation, ask questions:
- If a user has a vision disability, will they still be able to understand how the content operates?
- Instead of animating UI elements to show how they work, can I provide text instructions?
- Why is motion or animation necessary? How does it make the product more user-friendly?
- Will motion work the same way for every user agent?
Clean, simple content is better — and you should only use motion if you absolutely need it. But if that’s the case, you can certainly implement motion in an accessible way. By providing your users with options and testing content against WCAG, you can avoid common accessibility barriers (and build a beautiful website that works for all users).
For help with a specific accessibility issue, send us a message to connect with an expert. To learn more principles of accessibility, download our free eBook: Developing the Accessibility Mindset.
