Website Animations and Motion: The Accessibility Risk Hiding in Your Design

Motion is the design trend that nobody questions. A parallax hero where the background drifts as you scroll. Text that slides in from the side as each section appears. A logo strip that scrolls forever. An auto-playing slideshow on the homepage. A video that plays silently behind your headline. Designers love these effects because they feel modern and expensive, and most business owners approve them without a second thought.

Here is the part nobody mentions in the design review: for a meaningful slice of your visitors, that motion does not feel modern. It makes them dizzy. It triggers a migraine. It makes them feel seasick at their desk. For a smaller group, certain kinds of flashing can trigger a seizure. And under the accessibility standards that the European Accessibility Act and the ADA effectively require, some of these effects are not just unfriendly — they are non-compliant.

This is one of the least understood corners of web accessibility, partly because the people it affects rarely complain. They just leave. So let us walk through what motion actually does to people, which effects cause the problems, and how you can test your own site in about ten minutes without a developer.

Who motion actually harms

When people picture web accessibility, they think of blind users and screen readers. Motion sensitivity is a different audience, and a surprisingly large one.

People with vestibular disorders. The vestibular system in your inner ear controls balance and your sense of where your body is in space. When it malfunctions — through conditions like Meniere’s disease, vestibular migraine, or after a concussion — visual motion that does not match what the body feels can cause vertigo, nausea, and disorientation. Parallax scrolling is a classic trigger because the page moves at a speed that does not match the scroll. Estimates of how many adults experience some form of vestibular dysfunction run high; this is not a rare edge case.

People prone to migraines. Motion, flashing, and high-contrast movement are well-documented migraine triggers. A single auto-playing, looping animation can be enough to start an episode that costs someone the rest of their day.

People with photosensitive epilepsy. Content that flashes more than three times per second can trigger seizures in people with this condition. This is the most serious motion risk, and it is the one that is flatly prohibited by accessibility standards rather than merely discouraged.

People with attention and cognitive differences. For someone with ADHD or certain cognitive disabilities, content that moves, blinks, or auto-advances while they are trying to read is not a minor annoyance — it pulls focus away from the task and can make the page genuinely unusable. Anyone who has tried to read a paragraph next to an auto-playing video knows the feeling; for some people it is constant.

The common thread: none of these people are likely to email you and say “your parallax made me nauseous.” They associate the bad feeling with your brand, close the tab, and do not come back.

The motion effects that cause the most trouble

Not all animation is harmful. A button that gently changes color when you hover over it is fine. The problems come from a specific set of patterns:

  • Parallax scrolling, where backgrounds, layers, or elements move at a different speed than the rest of the page as you scroll. This is the single most common vestibular trigger on the modern web.
  • Large scroll-triggered animations, where big blocks of content fly in, zoom, rotate, or slide as you scroll down the page. Small fades are usually fine; large movement across the screen is not.
  • Auto-playing carousels and sliders that advance on their own every few seconds. These combine motion with a second problem — they move content before slow readers can finish it.
  • Auto-playing background video, especially video with lots of movement playing behind text you are trying to read.
  • Infinite marquees and logo strips that scroll sideways forever with no way to stop them.
  • Animated GIFs and looping animations placed next to body text.
  • Flashing or strobing content, the most dangerous category, which can trigger seizures.

If your site uses any of the first four, you almost certainly have visitors who are quietly struggling with it.

Where this crosses the line into non-compliance

Two of the rules baked into WCAG — the standard the EAA references through EN 301 549, and the standard U.S. courts treat as the benchmark for ADA cases — deal directly with motion, and both are Level A, the most basic tier.

Three Flashes or Below Threshold (WCAG 2.3.1). Nothing on your site may flash more than three times in any one second. This rule exists specifically to prevent seizures. There is no “but it looks cool” exception. If you have a flashing banner, a strobing animation, or a video with rapid flashing, that is a clear failure.

Pause, Stop, Hide (WCAG 2.2.2). If something starts moving, blinking, scrolling, or auto-updating on its own, runs for more than five seconds, and sits alongside other content, you must give people a way to pause, stop, or hide it. This is the rule that auto-playing carousels and infinite marquees routinely break. A slideshow that advances by itself with no pause button is a textbook violation.

There is a third, stricter rule — Animation from Interactions (WCAG 2.3.3) — that says motion triggered by scrolling or other interaction should be switch-off-able. It is a Level AAA criterion, so it is not strictly required for the AA conformance most laws target, but it points to the fix that solves nearly all of this, which we will get to in a moment.

The practical takeaway: auto-playing motion and flashing are not gray areas. They are named, specific failures that an auditor or an opposing attorney can point to directly. They are also, fortunately, among the easier things to fix.

The one setting that fixes most of this

Here is the good news that most business owners have never heard. Every modern operating system — Windows, macOS, iPhoneOS, Android — has a setting called “Reduce Motion.” When someone who is sensitive to motion turns it on, their device broadcasts a quiet signal that any website can read: this person does not want animation.

Websites can listen for that signal and respond — turning off parallax, stopping auto-play, replacing big slide-in animations with a simple instant appearance. The technical name for this is prefers-reduced-motion, but you do not need to remember that. What you need to know is that it exists, it is well-supported, and a competent developer can wire your site up to respect it in a few hours.

This is the difference between a site that is hostile to motion-sensitive visitors and one that is considerate: the considerate site keeps its nice animations for the people who enjoy them, and quietly calms down for the people who have asked their device to calm things down. Nobody loses. You do not have to strip every animation off your site — you have to make the harmful ones optional, and let the visitor’s own device make the choice.

Test your own site in ten minutes

You can find out exactly how your site treats motion-sensitive visitors without any technical skill. Here is the process.

Step 1: Turn on Reduce Motion on your own device (2 minutes).

  • On a Mac: System Settings > Accessibility > Display > turn on “Reduce motion.”
  • On Windows: Settings > Accessibility > Visual effects > turn off “Animation effects.”
  • On iPhone: Settings > Accessibility > Motion > turn on “Reduce Motion.”
  • On Android: Settings > Accessibility > turn on “Remove animations” (the exact wording varies by phone).

Step 2: Visit your own homepage as if for the first time (3 minutes). Scroll slowly from top to bottom. Watch what still moves. Does the background still drift under your content? Do sections still fly in from the sides? Is the slideshow still auto-advancing? Anything that still moves aggressively after you have asked your device to reduce motion is a site that is ignoring the visitor’s request — which is exactly the experience your motion-sensitive visitors are getting.

Step 3: Find every auto-playing thing (3 minutes). With reduce-motion still on, look for anything that moves without you doing anything: carousels, sliders, marquees, background video, animated banners. For each one, ask two questions. Does it run for more than five seconds? Is there a visible pause or stop button? If the answer is “yes, and no,” you have a WCAG 2.2.2 problem.

Step 4: Watch for flashing (2 minutes). Reload the homepage and any landing pages and watch for anything that flashes, strobes, or blinks rapidly — in banners, in video, in animations. Rapid flashing is the one motion issue you should treat as urgent, because it is the one that can cause real physical harm.

Ten minutes of this will tell you more about your site’s motion accessibility than any automated scanner, because most scanners cannot detect motion problems at all. This is one area where a human watching the screen is genuinely better than a tool.

What to tell your developer or website builder

You do not have to know how to fix any of this yourself. You have to know what to ask for. Hand whoever maintains your site this short list:

  1. Respect prefers-reduced-motion. Make all decorative animation — parallax, scroll-triggered movement, large transitions — switch off automatically when the visitor has reduce-motion enabled on their device. This is the single highest-value change and it covers most of the problem.
  2. Add a pause control to anything that auto-plays. Carousels, sliders, marquees, and background video all need a visible, keyboard-reachable pause or stop button. Better yet, do not auto-advance carousels at all — let people click through at their own pace.
  3. Remove anything that flashes more than three times a second. No exceptions. If a video or animation flashes rapidly, replace it.
  4. Keep decorative animation small and brief. A gentle fade is fine. Big elements sliding or zooming across the screen are the ones that cause harm.

If you use a website builder like Squarespace, Wix, Webflow, or Shopify, most of these are controllable in the design settings or the slideshow block options — you can often turn off auto-advance and reduce animation intensity yourself without touching code.

The quiet business case

Motion accessibility is unusual among accessibility issues because the cost of getting it wrong is almost entirely invisible. Nobody files a complaint about feeling queasy. They just bounce. So you never see the lost conversions in a way that points back to the cause.

But the people affected are not a fringe group — they are a meaningful share of any audience, and they include people who would happily buy from you if your homepage did not make them feel ill. Calming down your site’s motion, and letting each visitor’s device tell you how much motion they can handle, is one of the cheapest accessibility wins available. It costs you nothing in visual appeal for the visitors who like animation, and it quietly removes a barrier for the ones who do not.

The flashy hero that drifts as you scroll might be costing you customers you never knew you had. Ten minutes with Reduce Motion turned on will tell you whether it is.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.