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