Animations don’t always make websites less accessible, but they can present issues for some users, particularly people who use assistive technologies (AT).
For example, carousel animations can frustrate screen reader users. The carousel might move between slides before the screen reader can announce the text, or it might grab the user’s keyboard focus when the slide changes. That’s one of the reasons that accessibility experts recommend using accessible alternatives to carousels.
Even when animations are fairly basic, they can distract users with ADHD (attention-deficit/hyperactivity disorder) or make content unreadable for individuals who use screen magnifiers.
Fortunately, all of these issues are avoidable. Contrary to a popular misconception, accessible websites can be beautiful — and they can certainly use animated content to capture visitors' attention. Here’s how to check your animations to make sure they work well for all users.
1. View your website with the CSS “reduced motion" preference
CSS (Cascading Style Sheets) has features to accommodate users with disabilities, and prefers-reduced-motion is one of the most important features.
Here’s how it works: Users can declare a preference for “reduced motion” in their operating system, and the computer will present an alternative version of animated content — provided that web developers provide an alternative version.
You can use prefers-reduced-motion to improve experiences for your users, particularly if your website uses moving, flashing, or blinking content.
To turn on the preference, follow the relevant steps for your operating system:
- Windows 10: Start > Settings > Ease of Access > Display > Toggle “Show Animations in Windows.”
- macOS: System Preferences > Accessibility > Display> Check “Reduce Motion.”
- iOS: Settings > Accessibility > Motion> Toggle “Reduce Motion.”
- Android: Settings > Accessibility > Toggle “Remove Animations.”
You can also temporarily enable the prefers-reduced-motion setting within your web browser.
Remember, “reduced motion" doesn’t mean “no motion.” Your reduced motion settings may still have animation, but you should avoid scaling, rotating, and wave effects.
For more guidance, read: What to Know About the CSS Prefers-Reduced-Motion Feature.
2. Make sure users can pause or hide animated content
While some of your users may activate the prefers-reduced-motion feature, others won’t know that it exists — and your goal is to accommodate as many users as possible.
To that end, try to provide controls for all animated content. The controls should allow users to pause or hide the animations, and they need to be intuitive: A simple pause/play button should suffice.
The Web Content Accessibility Guidelines (WCAG) addresses this in Success Criterion (SC) 2.2.2, “Pause, Stop, Hide.” This criterion is applicable for any moving, blinking, or scrolling information that:
- Starts automatically;
- Lasts more than five seconds, and;
- Is presented in parallel with other content.
Remember, most users hate autoplay. If you can avoid autoplay media, do so — especially if the media plays sound.
Related: Does WCAG 'Pause, Stop, Hide' Apply to Simple Animations?
Make sure your animations don’t flash more than three times per second
In rare cases, animations may be dangerous to your audience. People with photosensitivity may experience headaches, seizures, or other health effects when viewing certain types of content.
Photosensitivity disorders affect people in different ways, but they’re commonly triggered by intense light and repetitive patterns. WCAG 2.1 SC 2.3.1, “Three Flashes or Below Threshold,” requires that web pages do not contain anything that flashes more than three times in any one-second period.
If content must flash, follow these tips:
- Make sure that the flashing content is small. To follow WCAG, the flashing content must be smaller than 25% of 10 degrees of the visual field.
- Avoid using red hues in the flashing content.
- Don’t use flashing content to convey important information. For an obvious example, if your eCommerce website’s checkout instructions consist of flashing text, that’s a bad design decision.
Related: Making Your Web Animations Accessible: 5 Tips
4. Think about the experiences of actual users, not just WCAG’s requirements
Web designers and developers often focus on the terminology of WCAG rather than the purpose of the guidelines.
Remember, the guidelines address actual accessibility barriers that affect real-life users. Don’t try to “win" accessibility through technicalities — focus on the actual user experience.
When you think about your users, you can make stronger choices. For example, an animation might not technically require a pause button, but if you can add a pause button without ruining your site’s aesthetics, why not take that step?
The principles of inclusive design help you create richer, more engaging content that works for a wider range of people. That’s particularly true when you’re creating animations and other rich content: By thinking about your users, you can design with confidence.
To learn more principles of accessibility, download our free eBook: Developing the Accessibility Mindset.
