Reduce website motion without losing feedback: animations, sliders and controls

Read the user’s preference accurately

The prefers-reduced-motion media feature exposes a motion preference, usually configured through the operating system. The reduce value means the user has requested reduced nonessential motion. No-preference means no such preference is known; it is not affirmative consent to unlimited animation.

Decide how each component behaves with either value. A reduced-motion visitor should still be able to understand state changes and operate the page. Avoid replacing a visible result with silence, hiding navigation or turning a progress display into an unexplained frozen icon.

Check the preference before starting decorative motion where your implementation allows it. Applying a stop only after a large entrance animation has already played misses the first-load experience you intended to improve.

Keep the WCAG requirements distinct

WCAG 2.2 criterion 2.3.3, at Level AAA, concerns motion animation triggered by interaction: users must be able to disable it unless that animation is essential to the functionality or information. Scroll-linked travel and interaction-driven zoom effects deserve deliberate review under that scope.

Criterion 2.2.2, at Level A, has a different automatic-content test. Moving, blinking or scrolling information needs a pause, stop or hide mechanism when it starts automatically, lasts more than five seconds and appears alongside other content, unless the movement is essential.

Automatically updating information has its own clause: when it starts automatically and appears alongside other content, a mechanism must let users pause, stop, hide or control update frequency unless it is essential. Do not apply a blanket five-second exemption to auto-updating content. Honoring an operating-system preference alone does not establish that every relevant automatic component meets this requirement.

These are selected requirements, not a certificate for the whole page. Flashing, keyboard access, focus visibility and other accessibility questions remain separate checks. Document why an essential exception applies rather than treating the word “important” as sufficient justification.

.feature-card {
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .feature-card {
    transition: transform 160ms ease;
  }
  .feature-card:hover {
    transform: translateY(-3px);
  }
}

Connect JavaScript motion to preference changes

A CSS media query does not automatically stop a canvas loop, scripted slider, animated image or embedded video. Locate the code or component API that actually starts and stops each effect. A CSS animation and a JavaScript timer can coexist, so changing one may leave the other running.

For code you maintain, read a matchMedia query for prefers-reduced-motion, apply the initial match and subscribe to its change event. When the preference changes, tell the component to stop or replace its nonessential movement. Remove listeners when the component is disposed so repeated navigation does not accumulate competing handlers.

Define what stopping means: cancel scheduled frames or timers, settle into a readable state and retain any user-entered data. Resuming should not replay a large backlog of transitions. An explicit pause chosen by the visitor should also remain effective rather than being silently cancelled by a preference change.

Give an automatic carousel a real pause control

For a fictional announcements carousel, start by asking whether automatic rotation is necessary. A static list may communicate the same information more reliably. If rotation remains, make pause/resume discoverable and keyboard operable, with a label that reflects the action available.

Pausing only while a pointer hovers is not a complete control for touch users and people navigating by keyboard. Review focus behavior as well: a timed slide change must not unexpectedly replace a focused control or move the person to a different destination. Preserve a way to reach announcements manually while rotation is paused.

Test returning from another tab, reopening an accordion and navigating back to the page. These transitions can restart timers even after the main pause button worked. A component’s initial reduced-motion state, explicit pause state and disposal/reinitialisation logic need to agree.

Preserve status and embedded-content controls

When a form submits, keep an understandable waiting state and final result even if decorative motion stops. Retain relevant text, error recovery and safe duplicate-action handling. Do not leave a button permanently disabled because a visual animation no longer emits the event previously used to unlock it.

For embedded video, maps or other externally controlled components, inspect the provider’s actual controls and supported configuration. Parent-page CSS may not govern their internals. If the component cannot provide a usable presentation, consider a static preview or deliberate open action that preserves the reader’s task.

Layout stability is related but different. An effect can avoid layout shifts and still be uncomfortable. Our CLS diagnosis guide addresses changing geometry; reduced motion addresses the moving experience itself.