Under WCAG 2.2, how do 2.2.2 Pause, Stop, Hide and 2.3.3 Animation from Interactions differ in the motion they cover?

## Two criteria, two kinds of motion WCAG 2.2 has two success criteria that matter most for motion that bothers people (flashing, a seizure risk, is covered separately under Guideline 2.3). They are easy to confuse, and the distinction is **what starts the motion**. | | 2.2.2 Pause, Stop, Hide | 2.3.3 Animation from Interactions | |---|---|---| | Level | A | AAA | | Covers | Moving, blinking, scrolling or auto-updating content that starts automatically | Motion animation triggered by the user's interaction | | Conditions | For moving content: starts automatically, lasts more than five seconds, presented in parallel with other content | Any non-essential motion animation from interaction | | Requirement | A mechanism to pause, stop or hide it (or control update frequency for auto-updating content) | The motion can be disabled | | Exception | Movement that is part of an activity where it is essential | Animation essential to the functionality or the information conveyed | ## 2.2.2 Pause, Stop, Hide in detail The criterion's main concern is **distraction**: moving content competing with the rest of the page makes it hard for many people to concentrate or read. Its rules for moving content: 1. It applies when the content **starts automatically**, **lasts more than five seconds** and is **presented in parallel with other content**. 2. The user needs a **mechanism to pause, stop or hide** it. 3. It does not apply if the movement is **essential** to the activity. For **auto-updating** content, such as a live feed of new listings or price changes, there is no five-second allowance, and controlling the update frequency is an additional option. Points from the Understanding document that trip teams up: - "Starts automatically" includes motion started by **indirect interaction**, such as hovering or scrolling an element into view. Such content can fail 2.3.3 as well. - Stopping motion only **while an element has focus or hover**, and restarting when the user moves away, is not a pause mechanism, because it ties the user up. - A preloader that is the **only** content on the page is not in parallel with other content, so it needs no control. On a real-estate listings site, a looping aerial video behind the search box, a slow-zoom slideshow on a listing, or a scrolling "just sold" ticker all fall under 2.2.2 and need a visible pause, stop or hide control. ## 2.3.3 Animation from Interactions in detail 2.3.3 is about **physical harm from movement**. Its Understanding document names vestibular disorders explicitly and parallax scrolling as a common non-essential example. The rule: **motion animation triggered by interaction can be disabled**, unless it is essential. WCAG defines motion animation as adding steps between conditions to create the illusion of movement or a smooth transition, and excludes changes of colour or opacity that do not change perceived size, shape or position. The Understanding document suggests any one of these approaches: - Avoid unnecessary animation. - Provide a control to turn off non-essential animations from interaction. - Respect the reduce-motion setting in the user agent or operating system. On the listings site, parallax on the header photo, a zoom when opening a gallery photo, and a map flying to a pin after a search are all interaction-triggered motion under 2.3.3. ## Why the levels matter in practice Many organisations target **Level AA**, which includes 2.2.2 (a Level A criterion) but not 2.3.3. That means a product can claim AA while ignoring interaction-triggered motion entirely. Design systems commonly adopt 2.3.3's intent anyway, because the harm to people with vestibular disorders is severe and the cost of honouring the operating-system setting is small. ## An example that touches both A looping 3D floor-plan rotation that starts when it scrolls into view started from an indirect interaction. The Understanding document for 2.2.2 counts that as starting automatically, so if it runs longer than five seconds beside other content it needs a pause, stop or hide control, and it notes that such content can also fail 2.3.3. One pattern, two criteria: a design system that gives every looping or auto-starting pattern both a pause control and a reduced variant covers both.