prefers-reduced-motion Needs a Replacement, Not Just a Switch

A panel slides into view to show that an action succeeded. When a user prefers reduced motion, removing the slide is sensible. Removing the only sign of success is not. An accessible alternative preserves the information while changing how it arrives.

Treat prefers-reduced-motion as a design input. Identify what each animation communicates, then decide whether that meaning can be carried by an immediate state change, a short opacity transition, a label, or a persistent status message. A universal rule that sets every duration to nearly zero skips that work.

Begin with a calm baseline

For a small expandable panel, the non-animated state can be the default:

.notice {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .notice[data-entering="true"] {
    animation: notice-enter 180ms ease-out;
  }
}

@keyframes notice-enter {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

This snippet assumes the application sets data-entering when showing a notice. The notice remains present and readable without the animation. The duration is an illustrative design choice, not a medical threshold or accessibility guarantee.

Media Queries Level 5 defines the preference as a request to minimise the amount of non-essential motion. no-preference does not mean the user affirmatively requested animation. It means the query does not detect a reduced-motion preference.

Separate movement from information

List the purpose of a particular effect in an ordinary sentence. “The item moves into the basket so people understand where it went” is specific enough to evaluate. In reduced mode, a basket count that changes immediately and a short status message can carry that outcome without the travelling object.

An activity spinner has a different purpose: it signals that work is unfinished. Removing all animation may leave an ambiguous empty space. A persistent “Uploading…” label, followed by an explicit completion or failure state, can preserve the information. For a measurable operation, a progress value may be more useful than decorative rotation.

The same reasoning applies to navigation transitions. If the outgoing screen fades away before the incoming heading appears, consider whether the transition helps orientation or delays access. Reduced mode can switch immediately and place focus appropriately. The focus decision remains necessary even when the animation disappears.

Audit motion outside keyframes

CSS animations are only part of the inventory. Smooth scrolling, large hover transforms, parallax effects, animated SVG, video backgrounds, and JavaScript-driven motion can all need review. Changing an animation-duration rule does not alter a requestAnimationFrame loop that directly updates transforms.

MDN's media-feature reference explains using the preference in CSS and links to operating-system settings. For JavaScript behaviour, use matchMedia('(prefers-reduced-motion: reduce)') and respond to its current matches value. If the interface remains open while the preference changes, listen for the media query's change event and adjust ongoing effects.

Clean up that listener when the owning component is disposed. Otherwise, a preference intended to simplify the experience can expose lifecycle bugs in the application's animation layer.

Avoid brittle global cancellation

A global near-zero animation rule can affect code waiting for an animation to end. It can also leave elements in a state that was designed to be temporary. An entrance effect that begins with hidden content needs a readable final state regardless of whether the effect runs.

This is one reason to make application state independent of animation completion whenever possible. The data says the panel is open; the animation decorates the transition. If the panel becomes open only because an event handler for the animation runs, reduced mode, interrupted transitions, or removed elements may reveal the coupling.

Some effects can be simplified locally. Others should be removed completely. A small colour change and a large zoom are not interchangeable experiences, and “less motion” is not a single duration value. Review the actual spatial movement and the user's task.

Test the alternate path as a real mode

Enable reduced motion in the operating system or browser's emulation tools, then complete the interface's main tasks. Check that expanded content appears, progress remains understandable, and success or failure remains visible. Change the preference while an effect is active if the application supports live changes.

Also use the interface with a keyboard. An animated scroll may have hidden a focus-placement mistake by making the destination visually obvious; the immediate transition can expose it. The answer is to fix orientation, not restore compulsory movement.

The finished mode should feel deliberate. The same outcomes happen, the same information remains available, and movement no longer carries a message that nothing else explains.

Published by Jitsumi, covering useful software and developer decisions.