Developer notes
Animations (like gifs) can be accessible if:
- it automatically stops after 5 seconds or
- if users are presented with an intuitive way to pause it
Code examples
Allow animations to be disabled with CSS
People with vestibular disorders can be made ill by sweeping animations on screen.
It is important to change or disable animations when device reduce motion settings are activated.
This can be accomplished via CSS media query.
Bouncy box
If your device is set to reduce motion, the animation will softly fade from one color to the next instead of bounce; otherwise it will bounce.
Animated element