2.3.3 Animation from Interactions (Level AAA): WCAG explained. Axevoo

In plain English

Big motion effects that fire as you scroll, parallax, elements flying in, dramatic zooms, can make people with inner-ear (vestibular) disorders feel genuinely dizzy or sick. This AAA rule says let people turn that motion off (as long as it is decorative, not essential).

The clean way to do it is to respect the visitor’s system-level “reduce motion” setting, which the browser exposes to your CSS.

Who this is for

People with vestibular disorders, who get dizziness or nausea from large motion.
People prone to motion sickness generally.

How to check and fix it yourself

If your theme uses parallax or heavy scroll animation, wrap it so it stops when “reduce motion” is on.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Where we can help

We check whether your store honours the reduce-motion setting or forces animation on everyone, and flag scroll effects that need a switch. It is one of the newer WCAG 2.1/2.2 checks that flashy themes often miss.

Frequently asked questions

What does animation from interactions require?+

Success Criterion 2.3.3 (Level AAA, added in WCAG 2.1) says motion animation triggered by an interaction (like scrolling) can be turned off, unless the animation is essential to the functionality or information.

Why does scroll animation cause problems?+

Large parallax and zoom effects that move as you scroll can trigger dizziness, nausea, and disorientation in people with vestibular (inner-ear) disorders. Being able to switch that motion off prevents a physical reaction.

What's the easiest way to comply?+

Honour the operating system's 'reduce motion' setting with the CSS prefers-reduced-motion media query. When a visitor has that on, disable or tone down parallax, big transitions, and scroll-triggered movement.

Animation from Interactions