Understanding Success Criterion 2.3.3: Animation from Interactions

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

Intent of Success Criterion 2.3.3: Animation from Interactions

When users take an action not normally associated with animation but some animation is triggered, it can cause distraction or nausea. For example, if scrolling a page causes elements to move (other than the normal movement associated with scrolling) it can trigger vestibular disorders, causing nausea and headaches.

A common examples is where backgrounds move at a different rate to foregrounds (often termed "parallax scrolling") which can trigger the symptoms of vestibular disorders.

The criteria 2.2.2 Pause, Stop, Hide applies when the web page initiates animation, "Animation from interactions" applies when an interaction of the user initiates animation unexpectedly.

Note: The impact can be quite severe, triggering nausea, migraine, and potentially needing bed rest to recover.

The only way for a website not to trigger the effects of a vestibular disorder is not to use animations that can trigger the symptoms. If the user controls the movement in a webpage (such as scrolling page), there is an expected and controlled movement. When other animations are attached to that action they can trigger vestibular issues.

The website can provide a control to turn off animations which are triggered by user-interaction, or use a preference in the user-agent to achieve the same functionality.

Benefits of Success Criterion 2.3.3: Animation from Interactions

People with vestibular disorders are added as beneficiaries as they cannot always anticipate when animation happens, and are negatively affected if there is no warning or way of turning off the animations.

Examples of Success Criterion 2.3.3: Animation from Interactions

Techniques for Success Criterion 2.3.3: Animation from Interactions

Sufficient Techniques

  • Gx: Allowing users to set a preference that prevents animation.
  • CSS x: User reduce motion CSS media query to prevent animation for people that set it.