Implementation worksheet · 7 min read
A Reduced-Motion Checklist for Generated Marketing Sites
Treat motion on a generated marketing site as two separate jobs. First, anything that moves automatically for more than five seconds alongside other content (a logo marquee, an auto-advancing testimonial carousel, a looping background video) needs a mechanism to pause, stop or hide it, which in practice means a control on the page. That is WCAG 2.2 success criterion 2.2.2 Pause, Stop, Hide, Level A, and it applies whatever the visitor's settings. Second, honour the prefers-reduced-motion CSS media feature for motion triggered by interaction or scrolling, replacing slides, zooms and parallax with a fade or an instant change. The media feature is not itself a WCAG requirement: W3C lists it as a sufficient technique for 2.3.3 Animation from Interactions, which is Level AAA. Then test with the preference on and off, and confirm no content stays hidden.
Scope: the actor is whoever publishes a marketing site generated by an AI builder, or reviews one for a client. The starting state is a site that looks right on a laptop with default settings. The boundary is the site's own animation and media; embedded third-party players and chat widgets are listed and tested but may need their vendor's settings. The outcome is a result per animated element, with its behaviour specified for everyone and under reduced motion, and the WCAG criterion that applies, if any, named at its correct level.
Put it into practice
1. Inventory everything that moves
Load each page and write down every animated element: headline text that types itself, sections that slide up on scroll, parallax backgrounds, logo marquees, carousels, looping video, animated illustrations, smooth scrolling to anchors, page transitions. Include what only moves on hover or click. Inventory what shipped rather than what the prompt asked for; a generated site can carry motion nobody requested.
2. Sort each element: automatic or triggered
Automatic motion starts on its own: a marquee, an auto-advancing carousel, background video. Triggered motion starts because the visitor did something, scrolling included. W3C's Understanding document for 2.3.3 draws the same line: 2.2.2 covers animation the page starts automatically, 2.3.3 covers animation started by the user's interaction, and one element can fall under both.
3. Give automatic motion a pause control
For anything that starts automatically, lasts more than five seconds and runs in parallel with other content, 2.2.2 requires a mechanism to pause, stop or hide it unless the motion is essential. The sufficient techniques W3C lists for 2.2.2 include controls on the page (G4 and G186, for example), and prefers-reduced-motion is not among them. A marquee that stops for reduced-motion visitors but keeps running for everyone else, with no pause button, still needs the button.
4. Replace motion under reduce rather than just deleting it
Wrap non-essential transforms, parallax and scroll-linked movement in @media (prefers-reduced-motion: no-preference), or override them under (prefers-reduced-motion: reduce). MDN describes the setting as a request for an interface that removes, reduces or replaces motion-based animation, and names scaling or panning large objects as possible vestibular triggers. A short opacity fade is a reasonable stand-in for a slide-in; a zoom is not.
5. Check content still appears with motion reduced
The failure specific to scroll-reveal patterns: sections start invisible and a script animates them in. If the reduced-motion rule removes the animation but not the invisible starting state, those sections never appear. With the preference set to reduce, scroll every page top to bottom and confirm each heading, testimonial, pricing row and form is visible.
6. Check flashing separately
Nothing may flash more than three times in any one-second period unless the flash is below the general and red flash thresholds (2.3.1 Three Flashes or Below Threshold, Level A). This applies with or without a motion preference. Glitch-effect headlines and strobing video intros are the elements to look at.
7. Test with the preference on and off
In Chrome DevTools, open the Rendering tab and set Emulate CSS media feature prefers-reduced-motion to reduce. In an automated check, Playwright's page.emulateMedia({ reducedMotion: 'reduce' }) does the same. Then repeat on one real device with the operating system's reduce-motion setting on (MDN lists where it lives on Windows, macOS, iOS, Android and Linux desktops), because emulation tests your CSS, not a visitor's setup.
8. Worked example (illustrative, synthetic data)
A generated landing page for a fictional scheduling app with six animated elements: a typed headline that plays once in about three seconds, sections that slide up on scroll, a parallax hero background, a logo marquee that loops indefinitely, a testimonial carousel advancing every six seconds, and a muted looping background video. Decisions: the headline plays once for under five seconds, so 2.2.2's conditions aren't met, and under reduce it renders as static text. Sections fade instead of sliding, and their starting state is visible. Parallax is removed under reduce. The marquee, carousel and video each get a visible pause control for everyone; under reduce they start paused and the video shows its poster image. One defect in this synthetic run: under reduce, the pricing section stayed invisible.
Reduced-motion checklist
Copy this structure into your review document and record your observed result for each row.
| Element | Starts | WCAG 2.2 criterion that applies | Behaviour for everyone | Behaviour under reduce |
|---|---|---|---|---|
| Logo marquee that loops | Automatically | 2.2.2 Pause, Stop, Hide (A) | Visible pause control | Starts paused or shows a static row |
| Auto-advancing carousel | Automatically | 2.2.2 Pause, Stop, Hide (A) | Visible pause control | No auto-advance; slides change on request |
| Looping background video | Automatically | 2.2.2 Pause, Stop, Hide (A) | Visible pause control | Poster image instead of playback |
| Typed headline, once, under five seconds | Automatically | 2.2.2 conditions not met; 2.3.1 if it flashes | Plays once | Final text shown immediately |
| Sections that slide up on scroll | On scroll | 2.3.3 Animation from Interactions (AAA) | Content visible even if the script fails | Opacity fade or no animation; visible starting state |
| Parallax background | On scroll | 2.3.3 Animation from Interactions (AAA) | May animate | Static background |
| Card zoom on hover or focus | On hover or focus | 2.3.3 Animation from Interactions (AAA) | May animate | No scaling; colour or shadow change instead |
| Smooth scroll to anchors | On click | 2.3.3 Animation from Interactions (AAA) | May animate | Instant jump |
| Page transitions | On click | 2.3.3 Animation from Interactions (AAA) | May animate | Cross-fade or instant change |
| Glitch or strobe effect | Any | 2.3.1 Three Flashes or Below Threshold (A) | No more than three flashes in any second, or below threshold | Removed |
A failure worth checking
The reduced-motion rule that blanks the page. A generated site animates sections in from a hidden starting state: invisible and 40 pixels lower. Someone adds a helpful rule that sets animation to none for visitors who prefer reduced motion. For every visitor with that setting, the animation never runs, so the sections never become visible, and the pricing table and signup form are simply blank. The site looks fine on a default laptop and fails completely for the people the rule was written for. The counterexample in the other direction: stripping every transition under reduce, including a button's pressed state or a progress indicator, removes information. The setting asks for less non-essential motion, not for no feedback.
Common questions
Is prefers-reduced-motion required by WCAG?
No. It is a CSS media feature defined in the Media Queries Level 5 specification. W3C's Understanding document lists using it as one sufficient technique for 2.3.3 Animation from Interactions, a Level AAA criterion, and AAA criteria sit outside a Level AA conformance target. It is still worth doing, because it is cheap and it is what visitors who set the preference expect; just don't describe it as a compliance requirement.
Does the pause control have to be visible all the time?
2.2.2 asks for a mechanism, and the techniques W3C lists for moving content include controls on the page. Put the control next to the moving content and make sure it can be reached and operated with a keyboard. A pause button that only appears on mouse hover leaves keyboard users without it, which brings 2.1.1 Keyboard into play.
What about motion inside embedded widgets?
List them in the inventory and test them. You may not control the animation in a third-party chat bubble or video player. If it can't be paused or reduced, that is a finding about the vendor, and it belongs in the site's known-issues list rather than being quietly left out.
Basis and scope
This is a proposed implementation method using illustrative examples, not a measured benchmark or a customer case study. Prepared with AI assistance. Validate product-specific behavior against current documentation and your own test environment.