Accessible Animation Guide

Use animations that enhance UX without causing accessibility issues.

Usage

Describe your animations to get accessibility compliance guidance.

Examples

• "Add prefers-reduced-motion support to our page transitions"
• "Check if our loading animation could trigger seizures"
• "Make our scroll-triggered animations accessible"

Guidelines

• Respect prefers-reduced-motion media query
• Never flash content more than 3 times per second
• Provide pause, stop, and hide controls for auto-playing content
• Ensure animated content is still readable
• Use animation to support comprehension, not just decoration