Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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  

  • No labels