#Accessibility

Many types of animated effects are very likely to be problematic for people with motion sensitivity. For some, motion can trigger physical reactions like seizures, migraines, nausea, and dizziness. It can also negatively affect cognition and concentration.

The following guidelines help us to design motion that is safe for our audience and won’t cause unintended harm.

#Minimise flashing

Flashing can cause seizures in those who are photosensitive. Avoid flashing colors and use appropriate transition patterns instead of instant jump cuts.

#Avoid autoplay

Non-essential animations shouldn't play or loop for longer than five seconds without controls to pause, stop, or hide them. Avoid auto-scrolling carousels and auto-playing videos.

#Other best practices

• Avoid bouncing animations
• Avoid animations that cover up large screens
• Avoid horizontal scroll while users are scrolling vertically
• Avoid moving elements at different speeds, such as the parallax effect
• Make sure animations don't interfere with screen magnifiers

#Reduced motion

Reduced motion involves removing all heavy motion effects from the product to accommodate users who suffer from motion sensitivity.

#Larger movements

Large page transitions, or movements such as a toast or dialog sliding in, should be replaced with a simple 200 ms opacity fade.

#Automatic scrolling

Smooth scrolling effects should be replaced with the default browser anchor link behaviour.

#Animated brand illustrations

A non-essential animated brand illustration should be replaced with a static version.