Animation from Interactions Must Be Avoidable

Animation from Interactions ensures that users are not harmed, disoriented, or distracted by motion effects triggered by their own actions. While animation is often used for visual polish or emphasis, non-essential motion can cause serious physical reactions for some users.

This criterion exists because motion triggered by interaction, such as scrolling, clicking, or hovering, can provoke dizziness, nausea, headaches, or loss of concentration, particularly for users with vestibular (inner ear) disorders.

WCAG Success Criterion

2.3.3 Animation from Interactions (Level AAA)

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

Why This Matters

Some users experience vestibular disorder reactions when exposed to motion effects. These reactions can occur quickly and may include:

• Dizziness
• Nausea
• Migraines or headaches
• Difficulty concentrating
• Needing to stop using the device entirely

Unlike decorative discomfort, these reactions can be severe and long-lasting. Even brief or subtle motion, such as elements sliding, zooming, or drifting in response to scrolling, can trigger symptoms.

Because the motion is triggered by normal interactions, users may not anticipate it or be able to avoid it without explicit controls.

Intent of the Criterion

This success criterion intends to allow users to prevent non-essential animation caused by their interactions.

This includes animation triggered by actions such as:

• Scrolling
• Clicking or tapping
• Hovering
• Navigating between views

The criterion does not prohibit all animation. It draws a clear line between:

• Essential animation, which is necessary to understand the content or operate the interface
• Non-essential animation, which is decorative or stylistic and can be safely removed

At Level AAA, users must be given a way to disable non-essential interaction-based motion.

Animation Triggered by Interaction vs Automatic Animation

This distinction is critical.

Animation from Interactions (SC 2.3.3)

• Triggered by intentional user actions
• Examples: parallax scrolling, hover animations, animated transitions on click
• Must be removable or suppressible if non-essential

Automatic Animation (SC 2.2.2 Pause, Stop, Hide)

• Starts without user action
• Examples: auto-playing animations, looping background motion
• Requires pause, stop, or hide controls

Some animations may fall under both criteria if they are automatic and also respond to interaction.

Scrolling and Essential Motion

Not all movement caused by scrolling is prohibited.

• Essential scrolling movement, bringing new content into view, is allowed
• Users control this movement directly

However, additional motion layered onto scrolling is non-essential and must be controllable.

Examples of non-essential scroll-based animation:

• Backgrounds moving at a different speed than foregrounds (parallax)
• Decorative elements sliding or floating as the page scrolls
• Zooming or rotating effects tied to scroll position

Users must be able to turn off this extra movement.

What Counts as Essential Animation

Animation is considered essential when removing it would:

• Break functionality, or
• Remove information needed to understand the content

Examples of essential animation:

• Previewing animations in an animation-authoring tool
• Visual indicators that communicate state changes are not conveyed otherwise

Essential animation is allowed and does not need to be suppressible.

How to Meet This Criterion

Authors can satisfy this requirement in any of the following ways:

• Avoid using non-essential animation altogether
• Provide a user control to disable non-essential animation
• Respect user preferences such as:
  • prefers-reduced-motion

The solution does not need to be custom-built if the user agent or operating system preference is honoured.

Who This Helps

This criterion primarily supports users who:

• Have vestibular disorders
• Experience motion-induced nausea or dizziness
• Have migraines triggered by visual movement
• Are easily distracted by motion effects

Reducing unnecessary motion improves usability for many users, not only those with diagnosed conditions.

Common Failure Patterns

Failures often occur when:

• Parallax scrolling cannot be disabled
• Hover or focus animations cause elements to move significantly
• Page transitions include large-scale motion without a fallback
• Scroll-based effects add decorative movement without user control

These failures can exist even when the animation is subtle or visually appealing.

Examples

Passing example
A website uses parallax scrolling effects, but provides a global control to turn off non-essential motion across the site.

Passing example
A page transition animation is disabled automatically when the user has enabled the operating system’s “reduce motion” preference.

Failing example
Decorative elements slide and zoom in response to scrolling, with no option to disable the motion.

Rule Description

Non-essential animation triggered by user interaction must be removable or suppressible. Animation that is essential to the functionality or information being conveyed is allowed.

The Algorithm

1. Identify animation triggered by user interaction
2. Determine whether the animation is essential
3. If the animation is non-essential:
   • Check whether users can disable it
   • Or whether reduced-motion preferences are respected
4. If non-essential animation cannot be disabled:
   • The criterion fails
5. If all non-essential animation can be disabled:
   • The criterion passes

How to Test This

• Interact with the page using scroll, click, and hover
• Observe whether motion effects occur
• Enable “reduce motion” at the OS or browser level
• Verify that non-essential animation is removed or suppressed
• Confirm that essential functionality remains usable

Wrapping Up

Animation from Interactions (Level AAA) recognises that motion is not neutral. For some users, unnecessary movement is not a design preference; it is a physical barrier. At this level, users must be able to engage with content without being forced to endure motion that makes them sick or disoriented.

By ensuring non-essential animation can be disabled, authors create experiences that are safer, more comfortable, and more inclusive, without sacrificing functionality or meaning.