SKP
Get in touch

JOURNAL 05

ACCESSIBLE MOTION IS A DESIGN PROBLEM.

Wrapping everything in a media query that disables animation is compliance, not design. The people who need it deserve a considered alternative rather than a stripped version.

Entry
05
Subject
Accessibility
Query
prefers-reduced-motion
Approach
Design, don't disable
Dark angular mass at the centre of an explosive white radial burst, motion at full unreduced intensity
Concept render — motion at full intensity

//What the preference actually means#

It isn't a taste setting. For people with vestibular disorders, large-scale motion can cause genuine nausea and dizziness — parallax, elements sliding across the viewport, zooming transitions, anything that implies the world is moving rather than the content. Some people also set it for attention reasons or on low-powered hardware. The common thread is that unrequested movement is a cost, not a delight.

//Why disabling isn't enough#

Turn off every animation and things often break. A panel that faded in now appears with no indication anything happened. A multi-step transition that communicated a relationship now shows an unexplained jump. Users of the reduced-motion path end up with an interface that's not just plainer but genuinely less clear, which is the opposite of the intent.

The better approach is to substitute rather than subtract. Keep the communication and remove the movement: replace a slide with a short opacity fade, replace a parallax scene with a crossfade between states, replace a travelling element with a highlight at its destination. Change is still signalled; nothing traverses the screen.

//Doing it properly#

Design the reduced-motion version at the same time as the standard one, not afterwards. On this site the two paths were specified together, which is why the reduced version collapses the pinned sections into a readable stacked layout rather than simply presenting the animated layout without its animation.

And test it. Set the preference in your own operating system and use the site for ten minutes. It takes almost no time and it's the only way to notice that a state change has become invisible.

Fig. 34 — prefers-reduced-motion, vestibular, wcag