Treat motion as a customer task issue
Movement can make a catalogue feel lively, but it can also distract a buyer from comparing products or cause discomfort. The decision is not simply whether a page has animation. Ask whether motion carries information, whether a customer can still complete the task when it is removed, and whether it starts automatically or follows an action such as scrolling or opening a filter. A carousel that moves away while someone is reading a price creates a different problem from a small progress indicator showing that an order is processing. Start by listing the actual customer journeys: find an item, inspect options, add it to a basket, submit a form and understand the result.
W3C's WCAG 2.2 separates two relevant criteria. Success Criterion 2.2.2, Pause, Stop, Hide, is Level A and applies to certain automatically starting movement, blinking, scrolling or updating content; the detailed conditions matter. Success Criterion 2.3.3, Animation from Interactions, is Level AAA and addresses non-essential motion triggered by user interaction that can be disabled. A business should not present the Level AAA criterion as a legal requirement or claim that passing one criterion proves the whole page accessible. The distinction helps prioritise fixes and describe them honestly. Design choices can also go beyond the minimum criteria when they make the service easier to use.
Inventory motion by trigger and task
Walk through each template while recording what moves, what triggers it, how long it continues, whether it repeats, how much of the view it occupies and what information disappears. Include opening menus, sliding drawers, zooming product images, loading skeletons, parallax backgrounds, carousels, toast messages and success screens. Check desktop and mobile layouts because a modest animation on a large monitor may dominate a phone. Include error paths: a failed form submission may suddenly shake fields or scroll the page. Also inspect embedded widgets and videos; ownership by another vendor does not make their behavior invisible to the customer.
Make an explicit keep, replace or remove decision for every effect. If movement merely decorates a product card, the static version should show the same name, image, price and controls. If a loading indicator communicates that work is ongoing, retain a steady textual status when reducing movement. If a transition signals that a drawer opened, the open state still needs to be obvious through position, label, focus and content, even without the slide. Avoid replacing motion with a flashing effect. The alternative must preserve the information and control, not just stop the CSS animation while leaving content hidden or a button unresponsive.
Respect preference and offer control where needed
The CSS prefers-reduced-motion media feature detects a user's system or browser preference to reduce non-essential motion. MDN describes reduce as the expressed preference and no-preference as no known preference, not a demand for maximum animation. A resilient approach is to make a clear static interface the baseline, then add optional motion for no-preference only where it improves comprehension. For existing pages, a reduce rule can suppress movement, but test what remains visible after transitions are removed. JavaScript driven animations need their own handling; a CSS override does not automatically stop animation started by script or a third-party widget.
W3C's explanation of 2.3.3 allows several approaches: avoid unnecessary motion, provide a control to turn it off, or honour the user's reduced-motion setting. A site-level control can help when someone uses a shared device whose system preference they cannot change. Make the control easy to discover before a large effect occurs, label its state clearly, and retain that choice consistently across pages if the service can do so. Do not require a person to endure a full parallax page before reaching the switch. Changing the preference while a page is open should not strand content halfway through a transition or undo a completed customer action.
Check the different automatic-motion rule
For automatically moving, blinking or scrolling information, WCAG 2.2.2 applies when it starts automatically, lasts more than five seconds and is presented alongside other content, unless the movement is essential. The page then needs a way to pause, stop or hide it. Automatically updating information presented alongside other content has its own control requirement without that five-second threshold. These are precise conditions, so do not paraphrase them as 'all animations over five seconds are banned'. A rotating promotion that changes while a shopper reads product details deserves a pause control or a static design; a loading animation during a phase where interaction cannot occur needs separate analysis.
A pause button must be usable while the rest of the page remains usable. W3C notes that motion stopping only while an item has focus, then restarting as focus leaves, may fail the intent because the customer cannot continue using the page without restarting the distraction. Auto-advancing slides also need readable content and an understandable current state; stopping movement should not erase the displayed offer. For a time-sensitive feed, pausing may make the displayed information stale, so indicate that clearly when it resumes. Keep these concerns separate from motion triggered by a click or scroll, which is addressed by the interaction criterion and by broader good design.
A product page worked example
Imagine a shop page where photos zoom as the pointer moves, recommendations slide into view on scroll, and a delivery drawer flies in after an option is selected. The team first checks whether the shopper can identify the chosen variant and delivery terms without those effects. They keep a static enlarged photo control for deliberate inspection, remove the scroll slide, and make the drawer appear immediately with focus and a clear heading when reduced motion is selected. The product price and availability remain in the same readable place. This is a hypothetical design exercise, not a claim that the changes improved conversion or satisfy every accessibility requirement.
Now test the same page with a keyboard and touch screen. A pointer-only zoom may be inaccessible for reasons unrelated to motion; removing the animation alone will not solve that. Check that focus does not jump unexpectedly when the drawer appears, that a screen reader gets a usable label and that the add-to-basket confirmation is communicated without relying on movement. Test both reduced-motion on and off, then change the setting while the page is open. If scripts cache the initial preference, decide whether they must respond to changes or whether a clear reload is needed. Record observed behavior, not only a design intention.
Build a small repeatable test plan
A useful acceptance sheet names the page, triggering action, expected static result, expected ordinary result, and what was observed on each device. Include at least one automatic carousel, one interaction transition, one loading state and one embedded component if the site uses them. W3C's C39 technique describes testing by enabling reduced motion and checking each interaction-triggered animation for essentiality or suppression. This is a focused check, not a complete accessibility audit. Also ask an actual tester to read and complete the task without hurried movement; the point is whether the customer can use the page, not whether a media query appears in the stylesheet.
Make reduced-motion review part of normal design and release work. A new campaign banner, product gallery, chat widget or confirmation animation can reintroduce motion after the original audit. Put an owner on each remaining effect, note its purpose, and retest when the component or vendor changes. Support staff should know how to reproduce a complaint by enabling the preference and following the customer's path. If the problem comes from a third-party widget, record the supplier response and provide a workable alternative for the customer while it is corrected. This keeps the commitment anchored to the service experience rather than a one-time checklist.
Before you proceed
- Can a customer complete the same task with reduced motion enabled?
- Are automatic movement and interaction-triggered movement tested against their distinct conditions?
- Does turning motion off leave content, focus and status clear?
