OVERVIEW AND GENERAL GUIDELINES
Avoid distracting users during their interaction with a web page through animated content.
Users should be provided with a mechanism to stop, pause and hide any animated content.
Please see more detailed information on how to comply with this guideline.
ALLOW USERS TO PREVENT ANIMATION FROM BEING DISPLAYED
Overview and Guidelines
Set your website to respect prefers-reduced-motion and prevent animation from being displayed.
...
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.
...
{
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.
...
https://www.w3.org/WAI/WCAG21/Techniques/css/C39
WCAG Related References
2.2.2 Pause, Stop, Hide (Level A)
2.3.3 Animation from Interactions (Level AAA)
...