Usability247 All articles
Digital Accessibility

The Motion We Did Not Ask For: Auditing UK Services Against prefers-reduced-motion

Usability247
The Motion We Did Not Ask For: Auditing UK Services Against prefers-reduced-motion

Photo: Kwameghana(Bright Kwame Ayisi), CC0, via Wikimedia Commons

The setting is not the solution

A growing number of UK product teams now include the prefers-reduced-motion media query in their stylesheets. That is a welcome step. It is not, however, evidence that a service respects a user's request for less movement. The query is a signal, not an outcome. What matters is whether the journeys people actually complete remain usable when that signal is switched on.

This audit is written for teams who have moved beyond the checkbox. It assumes the CSS exists. It asks a harder question: when a motion-sensitive user arrives, logs in, searches, books, pays or recovers an account, does the interface stay still enough to use?

Why this matters in a UK context

Motion sensitivity is not a niche preference. For people with vestibular disorders, migraine, some forms of neurodivergence and certain balance conditions, large-scale movement, parallax and looping animation can trigger nausea, dizziness or disorientation. The effect is not merely aesthetic. It can end a session.

WCAG 2.3.3, Animation from Interactions, sets an expectation that motion animation triggered by interaction can be disabled unless it is essential. The UK public-sector accessibility regulations and the Equality Act 2010 provide the wider context in which reasonable adjustments and accessible services are considered. Neither requires a service to be motionless. Both make it difficult to defend a service that ignores a clear user preference and then fails at the point of completion.

The practical risk is familiar to anyone who has watched a usability session: the user does not complain about the animation. They simply stop, wait for the carousel to settle, lose their place, or abandon the form. The failure is recorded as a task failure, not as a motion defect.

What to audit, not just what to switch off

A reduced-motion audit should follow the journey, not the component library. The following surfaces deserve particular attention.

Autoplay carousels and hero banners

Check whether autoplay stops, whether manual controls remain available, and whether the first slide remains reachable. A common fault is a carousel that stops advancing but still shifts layout as slides load, moving the primary call to action after the user has begun to read it.

Parallax and scroll-linked effects

Parallax is often implemented outside the main stylesheet or through a third-party library. Disabling CSS transitions may not disable it. Test on the actual pages where it appears, including campaign landing pages and seasonal content that may bypass the design system.

Animated maps and location pickers

Maps frequently animate zoom, pan or marker drops. For a user with vestibular sensitivity, a map that re-centres with easing can be more disruptive than a static jump. Check whether the reduced-motion setting produces an immediate, non-animated change of view.

Loading states and skeleton screens

Pulsing skeletons, shimmer effects and looping spinners are often missed because they are temporary. For some users they are the most persistent motion on the page. A reduced-motion state should replace looping animation with a static indicator or a simple progress message.

Transition effects between steps

Multi-step forms and checkout flows often slide or fade between panels. When reduced motion is requested, the transition should be removed or reduced to an instant change. The test is whether the user can keep their visual bearings between steps.

A repeatable test script

Use a small panel of participants who self-identify as motion-sensitive, alongside one or two colleagues acting as controls. The aim is not a large-scale study. It is a structured check of whether the reduced-motion signal survives contact with real journeys.

  1. Set the environment. On the test device, enable the operating-system reduced-motion setting. Confirm it is active in the browser. Record the device, browser and assistive technology used.
  2. Run the core journey without intervention. Ask the participant to complete a representative task, such as booking an appointment or updating account details. Do not point out animations.
  3. Observe for pause, loss of place and avoidance. Note when the participant stops interacting, looks away, scrolls back, or asks for the motion to stop. These are the useful signals.
  4. Repeat with the setting disabled. Compare the two runs. If task completion and error rates are similar, motion may still be present but tolerable. If the reduced-motion run is materially better, the service is relying on the setting in ways it has not tested.
  5. Inspect the moving surfaces. For each carousel, map, loader and transition, record whether motion stops, reduces or continues. Capture short screen recordings where consent allows.
  6. Ask a direct question at the end. Keep it neutral: 'Was there anything on the screen that moved when you did not expect it to?' Avoid leading the participant towards a technical term.

A simple scoring model

Score each surface from zero to two. Zero means motion continues unchanged when reduced motion is requested. One means motion is reduced but still present in a way that affects orientation or reading. Two means motion is removed or replaced with a static equivalent, and the task remains completable. Add a short note for each score. The total is less important than the pattern: a service that scores well on carousels but poorly on loading states has an incomplete implementation.

Common failures and proportionate fixes

Three failures recur. First, the media query is applied to decorative CSS but not to JavaScript-driven animation. Second, third-party embeds, maps and marketing tags bypass the design system. Third, the reduced-motion state is treated as a visual preference rather than a functional one, so controls disappear along with the animation.

The fixes are usually proportionate. Replace looping loaders with static text. Remove scroll-linked easing. Make carousel controls explicit. Test the reduced-motion state as part of the release checklist, not as a one-off audit. Document which components have been verified and which have not.

The audit is the beginning

A service that respects reduced motion is not one that has added a media query. It is one that has tested the query across the journeys that matter and can show what happens when a user asks for stillness. For UK teams working under accessibility regulations and equality duties, that evidence is more useful than a stylesheet claim. It is also more honest. The user asked for less movement. The audit asks whether we listened.

All Articles

Related Articles

Checked at the Threshold: A Practical Audit for UK Age Assurance Journeys

Checked at the Threshold: A Practical Audit for UK Age Assurance Journeys

When the Out-of-Office Reply Becomes a Trap: Auditing UK Services on Public Holidays

When the Out-of-Office Reply Becomes a Trap: Auditing UK Services on Public Holidays

Hold the Line, Not the Caller: Auditing UK Phone Trees for People Who Cannot Wait

Hold the Line, Not the Caller: Auditing UK Phone Trees for People Who Cannot Wait