Skip to main content
All For Web For All

animation

GUIDELINES 2.2.2, 2.3

back

Overview

Animations on the web are images that lead to the creation of the illusion of movement, to give a sense of a smooth transition, or to attract user attention. This excludes changes of color, blurring, or opacity.

Who is impacted

Users with epilepsy, vestibular disorders, or attention difficulties who may be harmed or distracted by animations.

How to test

Check that all auto-playing animations can be paused, stopped, or hidden, and that no content flashes more than three times per second.

Resources

Visit W3C Understanding Pause Stop Hide and WebAIM for detailed guidance on animation accessibility.

Pause, Stop, Hide

Any moving, blinking, or scrolling content that starts automatically and lasts more than 5 seconds must have a mechanism to pause, stop, or hide it. This includes carousels, auto-scrolling news tickers, animations, and auto-updating content. Users must be in control of motion on the page.

Auto-playing videos and animations can be distracting for users with attention difficulties and potentially dangerous for users with seizure disorders. Provide clear controls to stop motion and respect the prefers-reduced-motion media query in your CSS.

Three Flashes Threshold

Content should not flash more than three times per second. Flashing content can trigger seizures in users with photosensitive epilepsy. This applies to all visual content including videos, animations, and GIFs. If flashing content is necessary, ensure it falls below the general flash and red flash thresholds defined by WCAG.