Bug 100: Animation Without Reduced-Motion Support (F104)

WCAG 2.3.3 (Animation from Interactions) | Animations ignore prefers-reduced-motion OS setting.

Failure F104: Spinning Loading Indicator

Click to show a spinning loader (no reduced-motion support):

Issue: Continuous spinning animation. Users with vestibular disorders get dizzy/nauseous. Motion-sensitive users experience disorientation. No prefers-reduced-motion check.

Failure F104: Sliding Sidebar Animation

Click to open sidebar (slides in from left with animation):

Issue: Sliding animation triggers every time sidebar opens. Can cause discomfort for users with motion sensitivity (about 15% of population). No option to disable.

Failure F104: Alert Pulsing Notification

A pulsing notification alert (demands visual attention):

⚠️ Alert: Your session is expiring soon! The red box pulses to get your attention.

Issue: Pulsing animation every 1 second. Draws attention but causes distraction for ADHD users, anxiety for some, motion sickness for vestibular disorder. Could be more accessible static alert.

Failure F104: Bouncing Icon Animation

A bouncing icon (excessive motion in UI):

⬇️

Issue: Bouncing icon repeats constantly. Distracting. Wastes battery on mobile. Users with motion sensitivity find it painful. No reduced-motion support.

Better Approach (For Reference)

Always support prefers-reduced-motion:

CSS Pattern (Simplest):

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none !important;
  }
}

JavaScript Check:

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

if (!prefersReducedMotion) {
  // OK to animate
  element.animate([...], options);
} else {
  // Show static version
  element.classList.add('no-animation');
}

Best Practice: Make animations optional. Default to static display, only animate if user allows. Avoid parallax scrolling, auto-playing video, and continuous motion in UI elements.

Who is Affected?

Animations without reduced-motion support harm users with:

  • Vestibular disorders: Balance issues triggered by motion (dizziness, nausea)
  • Photosensitive epilepsy: Rapid flashing can trigger seizures
  • ADHD: Distracting animations interfere with focus
  • Anxiety disorders: Excessive motion increases stress
  • Older adults: Motion can cause disorientation
  • Mobile users: Battery drain from constant animation
HAL Fixes: HAL detects all animation/keyframe definitions and wraps in @media (prefers-reduced-motion: reduce). HAL converts infinite animations to static displays. HAL removes parallax scrolling. HAL disables auto-playing video. HAL ensures animations are optional and respect OS accessibility settings. HAL tests motion with Windows high-contrast mode and macOS reduced-motion enabled.