Animated or auto-updating content has pause/play controls

Auto-playing carousels, tickers, or looping animations that run without pause controls cause concentration difficulties for users with attention disorders and can trigger seizures in photosensitive users if they flash. WCAG 2.2 SC 2.2.2 (Pause, Stop, Hide) is a Level A requirement for any animation or auto-updating content that lasts more than 5 seconds. Carousels are the most common violator — they advance silently and provide no control.

Add pause/play controls to any animation that runs longer than 5 seconds. Respect the user's prefers-reduced-motion preference to disable motion entirely for users who have set it.

export function AutoCarousel({ slides }: { slides: React.ReactNode[] }) {
  const [isPlaying, setIsPlaying] = useState(true)
  const [current, setCurrent] = useState(0)

  useEffect(() => {
    if (!isPlaying) return
    const timer = setInterval(() => setCurrent(i => (i + 1) % slides.length), 4000)
    return () => clearInterval(timer)
  }, [isPlaying, slides.length])

  return (
    <div>
      <button
        onClick={() => setIsPlaying(p => !p)}
        aria-label={isPlaying ? 'Pause carousel' : 'Play carousel'}
      >
        {isPlaying ? <PauseIcon /> : <PlayIcon />}
      </button>
      {slides[current]}
    </div>
  )
}

Also add @media (prefers-reduced-motion: reduce) { animation: none; } to your global CSS for all decorative motion.