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.
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