Goal
Reduce motion triggered by user interactions for users who are motion-sensitive.
Success Criterion · WCAG 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.
Level AAAWCAG 2.1Operable2.3 · Seizures and Physical Reactions
Copy button ready
What to do
Provide a way to disable non-essential motion animation triggered by interaction (or respect prefers-reduced-motion).
Why it matters
Some users experience dizziness, nausea, or migraines from motion effects, especially parallax and large transitions.
Success criterion
What WCAG 2.3.3 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
Intent
Why WCAG created this requirement
- Motion sensitivity can make certain animations harmful or unusable.
- Users should be able to reduce or disable non-essential motion.
- The criterion targets interaction-triggered animation (not all animation).
Benefits
Who gains when you pass
- Users with vestibular disorders can use the interface comfortably.
- Users with migraines or motion sensitivity avoid nausea and dizziness.
- All users benefit from reduced distraction when they choose it.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Large motion effects can cause dizziness or nausea, blocking use.
Users may abandon the site to avoid motion-triggered symptoms.
Exception guidelines
Use the WCAG 2.3.3 exceptions correctly
Document the rationale for each exception and note which alternative support you provide.
Essential animation
Animation is essential to functionality or information.
Requirement
Only essential animations are exempt.
Overview
If your UI animates as a result of user interaction (scrolling parallax, animated transitions, zoom effects), users must be able to disable that motion unless it’s essential. A common approach is honoring `prefers-reduced-motion`.
- Honor `prefers-reduced-motion: reduce` to minimize or remove motion.
- Provide in-app motion settings where appropriate.
- Keep essential motion (that conveys information) but consider alternative cues.
Reference: All summaries and highlights originate from Understanding WCAG 2.3.3 and the W3C quick reference.
Fast facts
- Conformance level
- Level AAA
- WCAG version introduced
- WCAG 2.1
- Principle
- Operable
- Guideline
- 2.3 · Seizures and Physical Reactions
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Smooth scrolling
Pass
Smooth scrolling is disabled when `prefers-reduced-motion` is set.
Fail
Smooth scrolling always animates long distances regardless of user preference.
Parallax hero
Pass
Parallax effect is disabled in reduced-motion mode; hero remains static.
Fail
Parallax continues and causes large motion during scroll.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document motion design rules and reduced-motion behavior per component.
- List animations considered essential and their justification.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 2.3.3
Official W3C interpretation, techniques, and intent for Animation from Interactions.
Quick Reference 2.3.3
Filterable list of sufficient techniques and failures.
Technique C39
Using `prefers-reduced-motion` to reduce motion.
MDN: prefers-reduced-motion
How to detect reduced-motion preference and adjust animations.
Implementation checklist
Capture progress and blockers
- Inventory interaction-triggered animations (parallax, transitions, animated scrolling).
- Implement reduced-motion alternatives via CSS `prefers-reduced-motion`.
- Avoid animated scrolling if the user prefers reduced motion.
- Provide settings/toggles for motion where appropriate.
- Test that disabling motion does not remove essential information.
Testing ideas
Prove conformance with evidence
- Enable “Reduce motion” at OS level and verify the site reduces interaction-triggered motion.
- Interact with the UI (open menus, navigate, scroll) and confirm animations are minimized.
- Verify essential information is still conveyed without motion.
- Test multiple browsers for `prefers-reduced-motion` support.
Related success criteria