Animation

Table of Contents

Overview

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.

Content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly as well as anyone who has trouble tracking moving objects. It can also cause problems for screen readers.

Moving content can also be a severe distraction for some people.

Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page.

Please see our guide related to slideshows, moving content and flashes.

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.

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 the choice set by the user. 

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  

WCAG Related Guidelines

2.2.2 Pause, Stop, Hide (Level A)

2.3.3 Animation from Interactions (Level AAA)