Overview and Guidelines
Set your website to respect prefers-reduced-motion and prevent animation from being displayed.
You can use the prefers-reduced-motion media query to apply specific styles that reduce or eliminate animations and transitions.
Add the following CSS media query to the site.
/* Reduce animations if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.animated-element {
transition: none;
transform: none;
}
}
Users can set their OS to indicate their motion preference.
This is supported by Chrome, Safari, Firefox, Edge
The 'prefers-reduced-motion' CSS Media Query will respect that choice.
Common Motion Preference Styles to Incorporate to the Media Query:
Disabling Animations and Transitions
Reduce or eliminate animations and transitions to prevent motion sickness or discomfort.
@media (prefers-reduced-motion: reduce) {
{
animation: none !important;
transition: none !important;
}
}
Simplifying Parallax Effects
Parallax effects can be dizzying for some users. Simplify or disable them.
@media (prefers-reduced-motion: reduce) {
.parallax {
background-attachment: scroll;
}
}
Adjusting Scrolling Effects
Smooth scrolling can be disorienting for some users. Turn it off.
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Reducing Complex Animations
For complex animations, such as slideshows or carousels, consider reducing the motion or providing alternative transitions.
@media (prefers-reduced-motion: reduce) {
.slideshow {
animation: none;
}
.carousel-item {
transition: opacity 1s ease-in-out;
}
}
Disabling Animated GIFs
Animated GIFs can be distracting or cause discomfort. Replace them with static images.
@media (prefers-reduced-motion: reduce) {
.animated-gif {
content: url('static-image.png');
}
}
Simplifying SVG Animations
SVG animations can be intricate and distracting. Disable or simplify them.
@media (prefers-reduced-motion: reduce) {
svg {
animation: none;
}
}
Adjusting Video Autoplay
Prevent videos from autoplaying to reduce unexpected motion.
@media (prefers-reduced-motion: reduce) {
video {
autoplay: false;
}
}
Reducing Text Effects
Text animations, like typewriter effects, can be reduced or disabled.
@media (prefers-reduced-motion: reduce) {
.typewriter-effect {
animation: none;
}
}
Minimizing Hover Effects
Hover effects can sometimes be too dynamic. Simplify them.
@media (prefers-reduced-motion: reduce) {
.hover-effect {
transition: background-color 0.2s ease-in-out;
}
}
Disabling Scroll Animations
Scroll-triggered animations can be disorienting. Disable them.
@media (prefers-reduced-motion: reduce) {
.scroll-animation {
animation: none;
}
}
Please see additional information.
https://www.w3.org/WAI/WCAG21/Techniques/css/C39