Skip to content

Blog

Reduced motion is a feature, not a fallback

Details
Date:
Author:
Noel Ruault
Topics:
AccessibilityDesignVanilla TypeScript

Every animated component on the site has a reduced-motion path that is designed, not just disabled. Typing becomes a print, reveals become visible, waveforms stand still, and the page loses nothing.

The media query is easy to honour and easy to honour badly. Setting animation to none on everything leaves elements stranded at their hidden starting state, which is how reduce-motion users end up staring at blank sections.

The rule here is that every hidden-by-default class has three guards: the observer that reveals it, a reduced-motion rule that forces it visible, and a noscript block that does the same without JavaScript. The animated version is the enhancement; the still version is the page.

All posts