Skip to main content
All Docs
FeaturesMaking Tax DigitalUpdated March 26, 2026

Accessibility: Motion & Animation Safety

Accessibility: Motion & Animation Safety

Added in v1.0.471 — Control A11Y-27

The platform respects the prefers-reduced-motion operating system accessibility setting. When a user enables reduced motion on their device, all animations and transitions in the application are automatically suppressed — no configuration or opt-in is required.

Why This Matters

Vestibular disorders affect a significant portion of the population. Animations such as fading modals, spinning loaders, pulsing dots, and zooming dropdowns can trigger symptoms including nausea, dizziness, and disorientation in users who are sensitive to motion on screen. The prefers-reduced-motion CSS media feature provides a direct, OS-level signal that the application should minimise or eliminate non-essential motion.

How It Works

Global animation override

A global rule in globals.css collapses all animation and transition durations to 0.01ms when the user's OS reports a reduced-motion preference:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This is a catch-all that applies to every element in the application, including third-party UI components.

Tailwind motion-safe: variant

For animations that are purely decorative and do not convey any state (such as the urgency pulsing dot in the sidebar and compliance ribbon), the Tailwind motion-safe: prefix is used directly in the component markup:

<span className='motion-safe:animate-ping absolute inline-flex h-full w-full rounded-full ...' />

The motion-safe: variant means the animate-ping class is only active when the user has not requested reduced motion. This ensures the ping animation is completely absent from the DOM's applied styles for reduced-motion users, rather than simply collapsed to a short duration.

Affected Animations

AnimationComponentBehaviour under reduced motion
animate-in, fade-in, zoom-in-95Modals, dropdownsInstant appearance (no fade or zoom)
animate-pulseLoading skeletonsStatic skeleton shape, no shimmer
animate-spinLoading spinnerInstant or static indicator
animate-pingSidebar urgency dot, compliance ribbon dotAnimation class not applied at all

Enabling Reduced Motion

This feature activates automatically based on the OS accessibility setting. No action is required inside the application.

Operating SystemWhere to enable
macOSSystem Settings → Accessibility → Display → Reduce Motion
iOS / iPadOSSettings → Accessibility → Motion → Reduce Motion
Windows 11Settings → Accessibility → Visual effects → Animation effects (off)
AndroidSettings → Accessibility → Remove animations

Standards Compliance

This implementation addresses:

  • WCAG 2.1 Success Criterion 2.3.3 — Animation from Interactions (Level AAA): Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
  • APCA / broader accessibility best practice for vestibular disorder accommodation.