Web animations play an important role in creating engaging experiences for users. For a quick example, visit Apple’s home page: As you scroll, the content changes, seamlessly drawing attention to the features of various products.
Of course, “seamless" is subjective. If you have certain vision- or memory-related conditions, you might prefer a simpler on-page experience — and if you’re using assistive technologies, you might purposely avoid websites that overuse animations.
Fortunately, web animations can be made more accessible, provided that designers consider the real-life experiences of users when making decisions. In this article, we’ll provide some tips for creating accessible animations that meet the requirements of the Web Content Accessibility Guidelines (WCAG).
1. If animations are triggered by motion, make them optional
Generally speaking, the best way to improve accessibility is to provide people with more options for enjoying your content. While motion-based web animations can be engaging, they can also disorient users, so try to provide an animation-free alternative.
The CSS media feature prefers-reduced-motion determines whether the user indicates a preference for reducing motion-based animation. Designers can use this feature to present alternative versions of content for these users. The Mozilla Developer Network provides a resource page with examples of correct implementation.
However, this requires people to declare their preferences before visiting your website. Where possible, the better option is to provide a toggle switch at the top of your web page that disables motion-based animation.
Either tactic can fulfill the requirements of WCAG 2.1 Success Criterion (SC) 2.3.3, “Animation from Interactions,” which requires that “motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.”
We’ll note here that WCAG 2.1 SC 2.3.3 is a Level AAA guideline, and websites can be considered reasonably accessible if they fail this requirement. Even so, the best practice is to accommodate as many users as possible — if you can accomplish that goal easily by providing your audience with options, take that step.
Related: 5 Tips to Improve Website Experience for People with Cognitive Disabilities
2. Avoid flashing content
Flashing content can be annoying for users with photosensitivity, and frequent flashes can trigger seizures. WCAG SC 2.3.1, “Three Flashes or Below Threshold,” prohibits websites from containing “anything that flashes more than three times in any one second period.”
While this success criterion is only applicable for viewports of a certain size threshold, the best practice is to avoid flashing media entirely. After all, your users are already on your website — you have their undivided attention — so avoid design decisions that could cause disorientation.
If flashing media is essential (for example, your site includes videos of lightning strikes), provide users with a content warning and avoid using autoplay. Ensure that the media plays on a small portion of the user’s screen by default.
WCAG SC 2.3.1 is a Level A requirement, which means that websites cannot be considered reasonably accessible if they fail this success criterion.
Related: Myths and Facts About Photosensitivity and Seizures
3. Allow users to pause, stop, or hide moving content
WCAG 2.1 SC 2.2.2, “Pause, Stop, Hide" is fairly self-explanatory: If content moves, blinks, scrolls, or auto-updates with new information, a mechanism exists to allow the user to pause, stop, or hide the movement.
Following this guideline helps to accommodate users who have vision-related disabilities, attention-related disorders, and certain neurocognitive conditions. In most cases, web animations comply with this requirement if the movement stops within five seconds.
Of course, some animations (such as product demonstration videos) may last longer. In these instances, provide a pause button and other controls to give users control over the content.
Related: Why Autoplay Is an Accessibility No-No
4. Test your web animations with a keyboard alone
Complex web animations may impact keyboard accessibility. WCAG 2.1 SC 2.1.1, “Keyboard,” requires that:
“All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.”
Many web users browse the internet with a keyboard alone, so you’ll need to test pages with web animations to make sure that they operate predictably. Browse through your page using the Tab and Shift+Tab keyboard commands and ask questions:
- Can you navigate to each link, video player control, and every other interactive element?
- Can you understand where your keyboard focus is located, or do you feel lost?
- Does your keyboard focus get “stuck" until certain animations complete?
Related: What is Keyboard Accessibility?
5. Use web animations thoughtfully (and sparingly)
While animations can enhance your website’s aesthetics, they can also introduce serious accessibility concerns. Less is generally more; subtle animations can keep visual-first users engaged without alienating people with disabilities.
Some final tips to keep in mind:
- Avoid animations that cause the foreground and background to move at different speeds.
- Pay attention to your website’s use of color and avoid using color alone to convey information.
- Test your content on multiple devices to make sure your animations operate as intended.
- Avoid animations that loop endlessly. If possible, make your animations disabled by default. Otherwise, limit their duration to a small number of cycles.
For more guidance, contact the Bureau of Internet Accessibility to speak with a subject matter expert.
