Accessibility Checklist: Animations and Motion
Bobby Bailey
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 tech 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.