A small reduced-motion check before shipping a landing page

Kai Mercer — Sun, 11 Oct 2026 00:11:35 +0000

A landing page can look fine on a phone and still miss someone's motion preference. Check both versions of the same page, not only a screenshot.

For decorative animation, a scoped CSS rule is a starting point:

@media (prefers-reduced-motion: reduce) {
  .hero-decoration {
    animation: none;
    transition: none;
  }
}

Replace .hero-decoration with the element that owns the motion. This is an example, not a fix for every animation on a site. Don't hide useful information when removing the effect.

Test with Reduce Motion off, then on in your device's accessibility settings. Does the content remain visible? Can you still follow the page and use its controls? Check animations triggered by interaction as well as ones that start on load.

If you're showing the result in a demo, label a short side-by-side clip: normal motion on one side, reduced motion on the other. Keep the content and viewport the same so the difference is easy to see.

The CSS preference value is reduce, not none. Reduced motion doesn't mean every animation must disappear; essential functionality and information still need to work.

DEV Community: Kai Mercer

A small reduced-motion check before shipping a landing page