Accessibility in Animations

Animations can enhance understanding and engagement — but they can also cause seizures, nausea, and disorientation for people with vestibular disorders, photosensitive epilepsy, or cognitive disabilities. Designing with accessibility in mind ensures your animated content works for everyone.

Modern operating systems let users request reduced motion. You can detect this preference with the prefers-reduced-motion CSS media query and adjust or disable animations accordingly.

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

In JavaScript, you can check the same preference programmatically:

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

if (prefersReduced.matches) {
  // Skip animation — show final state immediately
  element.style.opacity = 1;
} else {
  // Play animation normally
  playAnimation();
}

The Web Content Accessibility Guidelines (WCAG) 2.1 include specific criteria for motion and animation:

• 2.3.1 Three Flashes or Below (Level A) — Content must not flash more than 3 times per second
• 2.3.2 Three Flashes (Level AAA) — Content must not contain anything that flashes
• 2.2.2 Pause, Stop, Hide (Level A) — Auto-playing animations must have controls to pause, stop, or hide them
• 2.3.3 Animation from Interactions (Level AAA) — Motion triggered by interaction must be disableable

Getting animation timing right is crucial for both usability and accessibility:

• Not too fast — Transitions under 100ms feel instant and are hard to follow. Aim for 200–500ms for UI transitions.
• Not too slow — Animations over 1 second feel sluggish and can cause frustration. Keep total sequences under 5 seconds.
• Use easing — Ease-out curves feel natural. Avoid jarring linear motion for large movements.
• Stagger reveals — When showing multiple elements, add 200–400ms between each to reduce cognitive load.
• Provide pause controls — Always let users pause or scrub through longer animations.

Not everyone can consume animated content. Provide alternatives for those who need them:

• Export a static PNG or SVG — Show the final frame as a fallback image
• Add descriptive alt text — Describe what the animation shows, not how it moves
• Include a text summary — For complex animated sequences, add a written description alongside the animation
• Use progressive enhancement — Start with the static version, add animation as an enhancement

During animations, elements often change opacity or color. Ensure contrast remains sufficient throughout the entire animation:

• Avoid low-opacity text — Text fading in should reach full contrast quickly (within 200ms)
• Maintain 4.5:1 ratio — WCAG AA requires a 4.5:1 contrast ratio for normal text at all visible stages
• Don't animate color alone — If color changes convey meaning, add a secondary indicator (shape, icon, or label)

Animations affect cognitive processing. Keep these principles in mind:

• One thing at a time — Animate elements sequentially rather than all at once
• Meaningful motion — Every animation should serve a purpose (direct attention, show relationships, indicate state)
• Consistent patterns — Use the same animation style for similar actions throughout your project
• Avoid decorative loops — Infinitely looping animations can be distracting and anxiety-inducing

Excalimate is designed with accessible animation in mind:

• Timeline controls — Play, pause, and scrub through animations at any point
• Multiple export formats — Export static PNG/SVG alongside animated MP4/GIF for fallbacks
• Configurable timing — Fine-tune duration and easing per element to meet accessibility guidelines
• No auto-play — Exported animations don't auto-play in the editor, reducing surprise motion