Motion can enhance the user experience – but for some users, it can be distracting or even disorienting. Always ensure that motion and autoplayed content are implemented in a way that respects user preferences and accessibility standards.
Respect “Reduced Motion” Preferences
Many users set their operating system or browser to “prefers-reduced-motion”, signaling that they want to minimize or eliminate non-essential animations.
To support this:
- Use the prefers-reduced-motion media query in CSS or JS
- Disable all animations when this setting is active
- Make sure to maintain usability without motion
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
transition: none;
}
}
This setting should always override decorative or optional animations.
Play/Pause for Autoplay Content
Any autoplaying content – such as videos or slideshows – must provide clear play/pause controls. This gives users control over movement on the screen, which is especially important for those with cognitive or vestibular sensitivities.
Best practices:
- Autoplay video should be mute, or at least start muted
- Include a visible play/pause toggle
- Allow users to stop or restart autoplay loops (e.g., carousels)
- Avoid autoplaying multiple elements simultaneously
