wcag-2.3.3-animation-from-interactions.txt

Skip to content WCAG 2.2 Understanding Docs Informative explanations, not required to meet WCAG About WCAG Understanding Docs - All Understanding Docs - Guideline: Seizures and Physical Reactions - Previous SC: Three Flashes Page Contents - In Brief - Success Criterion - Intent - Benefits - Examples - Related Resources - Techniques - Key Terms Understanding SC 2.3.3 Animation from Interactions (Level AAA) In Brief Goal Users are not harmed or distracted by motion. What to do Support user preferences for motion, and eliminate unnecessary motion effects. Why it's important People can get sick from motion effects. Success Criterion (SC) Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. Intent The intent of this success criterion is to allow users to prevent animation from being displayed on web pages. Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders. Vestibular (inner ear) disorder reactions include dizziness, nausea and headaches. Another animation that is often non-essential is parallax scrolling. Parallax scrolling occurs when backgrounds move at a different rate to foregrounds. Animation that is essential to the functionality or information of a web page is allowed by this success criterion. "Animation from interactions" applies when a user’s interaction initiates non-essential animation. In contrast, 2.2.2 Pause, Stop, Hide applies when the web page initiates animation "automatically" that is not in response to an intentional user activation. There may be situations where a particular animation may fail both success criteria. Note The impact of animation on people with vestibular disorders can be quite severe. Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover. How can a website reduce the chances of triggering a vestibular disorder? Choose any one of the following solutions. Avoid using unnecessary animation. Provide a control for users to turn off non-essential animations from user interaction. Take advantage of the reduce motion feature in the user agent or operating system. What about movement caused by a user scrolling a page? Moving new content into the viewport is essential for scrolling. The user controls the essential scrolling movement so it is allowed. Only add non-essential animation to the scrolling interaction in a responsible way. Always give users the ability to turn off unnecessary movement. Benefits - Vestibular Disorder - People with vestibular disorders need control over movement triggered by interactions. Non-essential movement can trigger vestibular disorder reactions. Vestibular (inner ear) disorder reactions include distraction, dizziness, headaches and nausea. - Persona Quote: "Stop that extra movement! You are making me so dizzy I cannot concentrate. Now I have to turn off my computer and go lie down." Examples Parallax scrolling with option to turn off unnecessary motion globally A site includes extra animations when the user scrolls. Decorative elements move in and out of view horizontally when the essential page content is scrolled vertically. A control at the top of each page allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting. Transitions that support the reduce motion preference A site includes a non-essential transition when loading new content. The transition is a page-flipping animation that respects the prefers-reduced-motion CSS media query. When the user enables the reduce motion preference, the page-flipping animation is turned off. Essential animation A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation. Related Resources Resources are for information purposes only, no endorsement implied. - Mozilla documentation for prefers-reduced-motion - Demonstration of prefers-reduced-motion in Webkit - An Introduction to the Reduced Motion Media Query - Designing Safer Web Animations for Motion Sensitivity - iOS: Reduce Motion on iPhone, iPad or iPod touch - Mac: Reduce Motion - Windows 10: Reduce motion Techniques Each numbered item in this section represents a technique or combination of techniques that the Accessibility Guidelines Working Group deems sufficient for meeting this success criterion. A technique may go beyond the minimum requirement of the criterion. There may be other ways of meeting the criterion not covered by these techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria , particularly the "Other Techniques" section. Sufficient Techniques - C39: Using the CSS prefers-reduced-motion query to prevent motion - SCR40: Using the CSS prefers-reduced-motion query in JavaScript to prevent motion - Gx: Allowing users to set a preference that prevents animation Key Terms essential if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform motion animation addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition Example For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring, or opacity which do not change the perceived size, shape, or position of the element. Errata: - Amending the definition to not exclude blurring View all errata Back to Top Help improve this page Please share your ideas, suggestions, or comments via email to the publicly-archived list public-agwg-comments@w3.org or via GitHub Email Fork & Edit on GitHub New GitHub Issue Date: Updated 16 September 2025. View this page's revision history. Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Adam Page, Alastair Campbell, Rachael Bradley Montgomery. W3C Staff Contact: Kevin White). The content was developed as part of the WAI-Core projects funded by U.S. Federal funds. The user interface was designed by the Education and Outreach Working Group ( EOWG ) with contributions from Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part of the WAI-Guide project, co-funded by the European Commission. W3C Web Accessibility Initiative (WAI) Strategies, standards, resources to make the Web accessible to people with disabilities - Get News in Email - LinkedIn - Mastodon - YouTube - Home - Contact - Site map - Support WAI - News - Accessibility statement - All Translations - Resources for roles Copyright © 2026 World Wide Web Consortium . W3C ® liability , trademark and permissive license rules apply unless otherwise noted. See Permission to Use WAI Material . -