Lottie Accessibility: Motion Preferences, ARIA, and Screen Readers

Lottie animations are visual by nature, which makes them easy to ship without thinking about the users who can't or don't want to experience motion the way it was designed. A few concrete things close most of that gap.

Respect prefers-reduced-motion

Users with this setting enabled have told their OS they're sensitive to motion, often for vestibular disorders. Check it before autoplaying, and default to a static frame instead of skipping the visual entirely.

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

if (prefersReducedMotion) {
  animation.goToAndStop(animation.totalFrames - 1, true); // show the end state, don't animate
} else {
  animation.play();
}

Make it visible to screen readers — or explicitly hide it

An SVG- or canvas-rendered animation carries no semantic meaning on its own. If the animation is purely decorative, hide it from assistive technology so it doesn't clutter navigation; if it conveys real information (a progress indicator, a status change), give it an accessible name instead.

<!-- purely decorative -->
<div id="lottie-container" aria-hidden="true"></div>

<!-- conveys meaning -->
<div
  id="lottie-container"
  role="img"
  aria-label="Upload complete"
></div>

Stay under the seizure-risk flash threshold

WCAG 2.3.1 sets the bar at no more than three flashes (or rapid alternations between light and dark) per second for any area larger than roughly a quarter of a typical viewport. Strobe-like or rapidly flickering effects built in After Effects should be checked against this before shipping, not left to chance.

Keyboard access for interactive animations

If a Lottie animation acts as a button or toggle (a morphing play/pause icon, an animated checkbox), the animation itself should sit inside a real <button> or an element with the correct role and keyboard handlers — a raw <canvas> or <svg> with only a click handler is invisible to keyboard and screen reader users.

Testing

• Toggle prefers-reduced-motion in your OS or browser devtools and confirm the animation actually responds.
• Run an automated audit (axe, Lighthouse) to catch missing labels on interactive animation containers.
• Tab through the page and confirm any animated control receives visible focus and responds to Enter/Space.