How to Use Motion Without Harming Accessibility
Animations and motion effects can enhance user experience but can also cause discomfort for people with vestibular disorders or attention difficulties. Use this checklist to ensure animations are accessible and user-friendly.
10-Point Accessible Animations and Motion Checklist
Number One: Provide a way to disable motion effects
Respect system settings for reduced motion (e.g., prefers-reduced-motion). Offer a manual setting to turn off animations if necessary.
Number Two: Avoid autoplaying animations longer than five seconds
Motion that lasts more than five seconds should include pause, stop, or hide options. Autoplaying videos should not loop indefinitely without controls.
Number Three: Do not use excessive flashing or rapid movement
Avoid flashing content more than three times per second to prevent seizures. Test with tools like the Photosensitive Epilepsy Analysis Tool (PEAT).
Number Four: Ensure animations do not interfere with content readability
Do not animate text blocks in a way that makes them harder to read. Ensure tooltips, pop-ups, and hover effects do not distract from primary content.
Number Five: Use subtle and purposeful motion
Motion should guide the user’s attention, not overwhelm or distract. Avoid unnecessary movement for decorative purposes.
Number Six: Ensure interactive animations are keyboard accessible
People using a keyboard should be able to pause or skip animated elements. Focus indicators should remain visible and unaffected by motion.
Number Seven: Do not rely on motion-based interactions
Avoid requiring gestures like shake, tilt, or swipe as the only way to complete an action. Provide alternative controls like buttons or keyboard shortcuts.
Number Eight: Use smooth transitions instead of abrupt changes
Sudden movements can be jarring; opt for gentle fade-ins or slow transitions. Keep animation speeds moderate (0.3s–1s) for a comfortable experience.
Number Nine: Ensure hover-triggered motion works for all users
Hover-triggered animations should not disappear too quickly. People using assistive technology should have enough time to interact with animated elements.
Number Ten: Test with people who have motion sensitivity
Use real user feedback to refine animations. Simulate reduced motion settings to verify animations respect user preferences.
Support my work in accessibility
Creating accessible content takes time, care, and deep testing — and I love every minute of it. From writing blog posts to doing live audits and building checklists, everything I create is designed to make the digital world more inclusive.If something here helped you — whether it saved you time, taught you something new, or gave you insight into accessibility — consider supporting my work.
You can buy me a coffee to help keep this platform going strong:
Buy Me a Coffee
Every coffee goes toward:
- Creating new articles with accessibility tips, tools, and testing methods
- Covering hosting, software, and assistive tech costs
- Supporting free education for designers, developers, and testers
- Making a meaningful difference for people living with disabilities
Thanks for being part of this mission to build a more accessible web — one page at a time.