angular-motion-accessibility

Standard IDs

ID	Severity	What it checks
MOT-001	P1	Animations with no prefers-reduced-motion: reduce fallback (WCAG 2.3.3)
MOT-002	P1	Auto-playing carousel/parallax/loop with no pause/stop control (WCAG 2.2.2)
MOT-003	P1	Router page-transition moves focus before the transition visually completes
MOT-004	P2	Animation timing/easing hardcoded per-component with no shared design token
MOT-005	P2	Animations drive layout-affecting CSS properties instead of transform/opacity

---

Check A — No reduced-motion fallback (MOT-001)

Detection

Grep @angular/animations trigger()/transition() definitions and CSS @keyframes/ transition rules for any that ignore the OS-level prefers-reduced-motion setting. Some users enable "reduce motion" specifically because animation triggers vestibular disorders, migraines, or nausea (WCAG 2.3.3 Animation from Interactions). Shipping every animation unconditionally means the app actively works against an accessibility setting the user explicitly turned on at the OS level.

BAD — animation always plays regardless of OS setting

export const slideIn = trigger('slideIn', [
  transition(':enter', [
    style({ transform: 'translateX(100%)', opacity: 0 }),
    animate('400ms ease-out', style({ transform: 'translateX(0)', opacity: 1 })),
  ]),
]);

GOOD — reduced-motion query gates the animated variant

const prefersReducedMotion =
  typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;

export const slideIn = trigger('slideIn', [
  transition(':enter', [
    style({ transform: 'translateX(100%)', opacity: 0 }),
    animate(
      prefersReducedMotion ? '0ms' : '400ms ease-out',
      style({ transform: 'translateX(0)', opacity: 1 })
    ),
  ]),
]);

/* CSS-driven animations: prefer a media query over JS branching where possible */
.card {
  transition: transform 400ms ease-out, opacity 400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}