skip to content

A real-estate listings site claims to honour the operating system's reduced-motion setting, yet users with vestibular disorders still report nausea. How do you find and fix the gaps?

level: seniorimportance: should knowfreq 32%

answer

  1. the setting covers what, exactly
  2. inventory every moving thing
  3. maps, video, scroll effects
  4. faster is not reduced
  5. test with the setting on

basics

~20 s

Walk the product with the setting on and list everything that still moves. Typical gaps: scroll effects, maps, embedded video and slideshows outside the component system, reduced variants that only shorten durations, and platforms that honour the setting inconsistently.

solid answer

~50 s

I would start by turning the setting on and walking every key journey on each platform, listing everything that still moves. The complaints usually trace to motion outside the shared component system: scroll-linked parallax on listing header photos, an embedded map that still flies, zooms and tilts to each result, auto-playing video tours and slow-zoom photo slideshows, and third-party widgets. The second common gap is reduced variants that merely shorten durations, so a zoom still zooms. The third is inconsistency, such as the web honouring the setting while the native app does not. The fix is to inventory motion by source, give each risky pattern a real reduced variant in its spec, stop auto-playing media or give it a pause control, and add a check with the setting on to the release process for every surface.

go deeper

for a junior

Recall that honouring the setting means everything that moves must respect it, not just the shared components.

for a middle

Explain the usual gaps: page-level scroll effects, embedded maps, auto-playing media, speed-only reductions and platforms wired inconsistently.

for a senior

Demonstrate the audit: reproduce with the setting on across platforms, inventory motion by source, fix per pattern, and add a release check so gaps stay closed.

for a principal

Discuss how the system's motion guidance, third-party selection criteria and release process together make reduced-motion support hold as the product grows.

## Why "we honour the setting" is often only partly true When a team says the product honours the **operating system's reduced-motion setting**, they usually mean the shared component library does: buttons, drawers and dialogs switch to their reduced variants. That is necessary but rarely sufficient. The motion people complain about often lives elsewhere. ## Step 1: reproduce and inventory 1. **Turn the setting on** on each platform the product ships to: web on desktop and mobile, and any native apps. 2. **Walk the key journeys**: search, browse results, open a listing, view photos, use the map, save a listing, contact an agent. 3. **List everything that still moves**, with its source: component library, page-level code, embedded third-party content, media. 4. **Rate each item** against the known triggers: parallax, zoom and scale, large-area movement, rotation, motion decoupled from input, looping. If complaints mention a specific page or action, start there, but finish the full inventory: one reported trigger usually has neighbours. ## Step 2: the usual gaps | Gap | Example on the listings site | Why the setting missed it | |---|---|---| | **Page-level scroll effects** | Parallax on the listing header photo | Built directly into a page, outside the component library's reduced mode | | **Embedded maps** | The map flies, zooms and tilts to each search result | A third-party or custom map has its own animation rules | | **Auto-playing media** | A drone video behind the search box; a slow-zoom photo slideshow | Video and slideshows are not "animations" in the system's sense, so no one mapped them to the setting | | **Speed-only reductions** | Gallery zoom made shorter in reduced mode | The kind of motion is unchanged, so the trigger remains | | **Platform inconsistency** | The web honours the setting, the native app does not, or the reverse | Each platform wired the setting separately | | **Late-added features** | A new 3D floor-plan viewer that auto-rotates | Built after the original reduced-motion work, without a reduced variant | ## Step 3: fix by pattern, not by page - **Give each risky pattern a real reduced variant in its spec.** Parallax becomes a static image, a map fly-to becomes an instant jump with the result pin highlighted, a gallery zoom becomes a crossfade. - **Treat auto-playing media as motion.** Under the setting, do not auto-play the drone video or the slideshow; show a still frame with a play control. Regardless of the setting, WCAG 2.2.2 Pause, Stop, Hide (Level A) requires a way to pause, stop or hide moving content that starts automatically, lasts more than five seconds and runs alongside other content. - **Configure embedded components.** Many map and media components expose options to turn off animated transitions; if one cannot be controlled, that is a selection criterion for replacing it. - **Align platforms.** The same pattern should have the same reduced behaviour on web and native, defined once in the system's motion guidance. - **Remove what cannot be justified.** Decorative parallax on a listing page may not deserve a reduced variant; it may not deserve to exist. ## Step 4: keep it fixed The gaps above reappear as the product grows unless checking for them becomes routine: - Add **testing with the setting on** to the release process for new patterns and pages, not only new components. - Keep the **motion inventory** current, including third-party content. - Include people with vestibular disorders in usability sessions where possible; they will find triggers the team does not notice. How the setting is wired up in code on each platform, and how an in-app override is offered, are implementation topics of their own. The design-system work is making sure every moving thing has a decided, specified reduced behaviour. ## Common mistakes in the fix - Shortening every duration globally and closing the ticket. - Fixing only the page named in the complaint. - Treating video and slideshows as content rather than motion. - Accepting a third-party component's motion because "we don't control it".

  • The embedded map component offers no way to turn off its fly-to animation. What do you do?
    Treat it as a product decision, not a dead end. Look for a way to set the view directly without the animated transition, which many map components offer. If none exists, avoid triggering the fly-to under the reduced setting, for example by showing a static location preview, and make controllable motion a criterion when choosing or replacing the component.
  • Should the drone video behind the search box auto-play for users without the reduced-motion setting?
    It can, but it still needs a visible control to pause, stop or hide it, because it starts automatically, lasts over five seconds and runs in parallel with other content, which is what WCAG 2.2.2 covers at Level A. Many teams also question whether it earns its place at all.

saying these in an interview costs you the question

  • Assumes the component library's reduced mode covers the whole product.
  • Shortens all durations globally and considers the setting honoured.
  • Treats auto-playing video and slideshows as content rather than motion.
  • Accepts third-party map or media motion as out of the team's control.
  • Checks only the page named in the complaint.