Your new homepage has text that fades up as you scroll, a background that drifts slower than the foreground, a looping video behind the headline, and icons that bounce into place. It feels lively in the design review. For a visitor with a vestibular disorder, the same page can bring on dizziness or nausea within a few scrolls. For someone with attention difficulties, the looping video makes the text beside it hard to read at all.
Animation accessibility is not about removing every bit of movement. It is about making motion optional, short, and never the only way to get the content. This post covers the WCAG criteria involved, the effects that cause most trouble on business sites, and the small piece of CSS that lets visitors who have asked their device to reduce motion get a calmer page.
Who motion affects, and how
Several different groups are affected, for different reasons:
- Vestibular disorders. Large movements, especially parallax and zooming effects, can trigger dizziness, headaches or nausea. The reaction can last well after the person leaves the page.
- Attention and cognitive disabilities. Anything that moves on its own pulls the eye. A looping banner beside a form makes it hard to concentrate on filling it in.
- Photosensitive epilepsy. Flashing content can trigger seizures. This is rare on business sites, but the stakes are high.
- Screen reader and magnifier users. Content that animates in late or moves around can be missed by a screen reader or slide out of a magnified view.
Some people in these groups have already switched on a setting called “Reduce motion” on iPhone and Mac, “Remove animations” on Android, or the animation effects switch in Windows settings. Your site can read that setting and respect it.
The WCAG criteria behind animation accessibility
2.2.2 Pause, Stop, Hide
This Level A criterion covers moving, blinking or scrolling content that starts automatically, lasts more than five seconds and appears alongside other content. Users must be able to pause, stop or hide it. It also covers auto-updating content, like a live ticker. On business sites it applies to looping background videos, animated banners, scrolling news tickers, marquee logos of clients or partners, and long animated graphics. Carousels fall under it too, and they have their own post in this hub on slider accessibility.
2.3.1 Three Flashes or Below Threshold
Content should not flash more than three times in any one second, unless the flash is small and below set limits. In practice: avoid strobe effects, rapid flashing text, and video clips with lightning, gunfire or camera flashes, unless you have checked them. If a video you embed contains flashing, warn viewers before it plays and do not autoplay it.
Animation from interactions
WCAG also has a criterion about motion triggered by user actions such as scrolling, where users should be able to turn non-essential animation off. That one is a Level AAA requirement, which most organizations do not aim to meet in full. It still describes exactly the problem with scroll effects, and respecting the reduced motion setting gets you most of the way there with little extra work.
The effects that cause most trouble
Parallax backgrounds
Parallax, where the background image moves at a different speed than the page, is one of the most common triggers for vestibular reactions. Page builders and themes often offer it as a single checkbox. If you use it, turn it off for reduced motion users, keep the movement small, and never put text inside the moving layer.
Scroll-triggered entrance animations
Text and images that fade, slide or zoom in as they reach the viewport are popular in Elementor, Divi and many themes. They cause three kinds of problem: motion that some visitors cannot tolerate, a delay that makes the page feel slow, and content that may stay invisible if a script fails or the visitor jumps to a section with the keyboard or a screen reader. Use them sparingly, keep them short, and make sure content is visible by default before any script runs. Our post on making an Elementor site accessible covers more of that builder’s habits.
Autoplaying background video
A silent video looping behind the hero headline is moving content that starts on its own. If it plays for longer than five seconds, users need a visible pause button that is reachable by keyboard. Better still: do not autoplay for reduced motion users, and consider whether the video earns its place. It also tends to slow pages down, as our post on background video and page speed explains. Videos with speech need captions, which is a separate topic covered in our guide to closed captions for website videos.
Animated GIFs and Lottie animations
A looping GIF in a blog post counts as moving content. Short animations that stop within five seconds are fine. Endless loops are not, unless the user can pause them. For Lottie or similar animations, check whether your plugin offers a play-once setting or controls.
Smooth scrolling and zoom effects
Smooth scrolling when you click an in-page link, hover zoom on images, and “scroll-jacking” that takes over the scroll wheel to play an animation are all common. The last one is the worst: it overrides what the user asked their device to do. Smooth scrolling and hover effects are mild but should still respect the reduced motion preference.
Using prefers-reduced-motion
Browsers expose the operating system’s motion preference through a CSS media query called prefers-reduced-motion. A developer can use it to switch off or soften animation only for visitors who have asked for that, while everyone else keeps the design as planned.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}That broad rule is a reasonable starting point added to a child theme or the theme’s custom CSS. It does not stop everything, though. Parallax and many entrance effects are driven by JavaScript, not CSS, so the script needs to check the same setting before running. A background video needs its own check so it does not autoplay. Ask your developer to confirm each effect, rather than assuming one CSS block covered it.
Reduced motion does not have to mean no motion. A fade can replace a slide. A product image can change without a zoom. The goal is to remove large movement and anything that loops, not every visual change.
Pause controls that actually work
Where moving content stays, its control needs to be usable:
- Put the pause button near the moving content, not hidden in a footer.
- Make it a real button that can be reached with Tab and activated with Enter or Space.
- Give it a clear name, such as “Pause background video”, and update it to “Play” when paused.
- Make sure it is visible against the video or animation behind it.
- Remember the choice if the user moves to another page, where that is practical.
How to check your own site
Turn on your device’s motion setting described above, then reload your homepage and main landing pages. Does anything still slide, zoom, drift or loop? Next, with the setting off, look for anything that moves for longer than five seconds and try to pause it using only the keyboard. Finally, scroll quickly to the bottom of a long page and back, and tab through it, checking that no content stays hidden because an animation did not fire. Automated scanners will not catch most of this; it is a judgment you make by looking.
Animation accessibility is one of several design questions editors and designers control, alongside color, type and wording. Our main guide to accessible web content ties those together, and our website accessibility hub covers audits, fixes and monitoring.
Frequently asked questions
Do I have to remove all animation from my website?
No. Short, small animations are usually fine. The aim is to let users pause anything that moves for more than five seconds, avoid flashing, and turn off large or decorative motion for people who have asked their device for less of it. Most sites can keep their design and simply add those controls and checks.
What does prefers-reduced-motion actually do?
It is a CSS media query that tells your site whether the visitor has asked their operating system to reduce motion. On its own it does nothing. Your theme or developer has to use it to switch off or soften animations, and scripts that run parallax or video need to check the same setting separately.
Is parallax scrolling an accessibility problem?
It can be. Parallax is one of the effects most likely to cause dizziness or nausea for people with vestibular disorders. If you keep it, make the movement subtle, keep text out of the moving layer, and disable it completely for visitors whose device asks for reduced motion. Many sites find they do not miss it.
Does a silent background video need a pause button?
If it starts automatically, plays alongside other content and lasts more than five seconds, yes. Under WCAG 2.2.2 Pause, Stop, Hide, visitors must be able to halt it or remove it from view. The button should be visible, reachable by keyboard and clearly named. Not autoplaying for reduced motion users is a sensible extra step.
If your site was built around heavy scroll effects and parallax, adding controls to each one can turn into a long list of patches. That is often a good moment to look at an accessible website redesign, where motion is planned as optional from the start instead of switched off after the fact.
Next in this series: Accessible Icons: SVG, Icon Fonts and Social Links
