• Success Criterion 2.2.2
  • Conformance level A

Site-Wide Ambient Animation That Ignores Reduced-Motion Settings

2.2.2 — Pause, Stop, Hide

Scenario

Setting

A webinar platform's registration form

What’s wrong

Parallax/continuous ambient animations running site-wide with no reduce/stop switch (and ignoring prefers-reduced-motion).

Example 

// parallax runs unconditionally
window.addEventListener("scroll", updateParallaxLayers);

Why it matters

A user filling out the registration form experiences constant background motion that makes them dizzy while reading fields.

How to test

Check the whole page for parallax or continuous ambient animation: if it runs site-wide with no reduce/stop switch and ignores the OS's prefers-reduced-motion setting, it fails.

How to fix

Check the OS setting first, and back it up with an on-page toggle.

if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  initParallax();
}
// <button onclick="toggleMotion()">Reduce motion</button>

Outcome

Registering for the webinar, a motion-sensitive user isn't left queasy by the background scroll.

Who is affected

Users with vestibular disorders can experience nausea or dizziness from motion that ignores their reduced-motion setting.

Learn more

Related scenarios