Animated Content and Timing

Animations and time-based content can make a web experience more dynamic and engaging, but for many users, these features can cause confusion, distraction, or even physical discomfort. 

Some users may have vestibular disorders, ADHD, or visual sensitivities that are triggered by motion. Others may need more time to read, interact with, or complete a task.

This page covers best practices for using animations and timed interactions in accessible ways, and how to comply with WCAG 2.1.

Why Accessibility Matters for Animation

  • Users with photosensitive epilepsy can be at risk from flashing content.
  • Users with vestibular disorders may become dizzy or nauseous from parallax or motion effects.
  • Users with cognitive disabilities or motor impairments may need extra time to complete tasks.
  • Users who rely on screen readers or keyboard navigation may not interact at the same speed as sighted, mouse-using users.

Related WCAG Success Criteria

  • 2.2.1 Timing Adjustable (A)
    Allow users to extend, adjust, or turn off time limits.
  • 2.2.2 Pause, Stop, Hide (A)
    Let users control content that moves, blinks, or auto-updates.
  • 2.3.1 Three Flashes or Below Threshold (A)
    Avoid flashing content that could trigger seizures.
  • 2.3.3 Animation from Interactions (AAA)
    Provide a way to disable animations triggered by user actions.
  • 1.4.3 Contrast (Minimum) (AA)
    Related when animations reduce contrast or readability.

Key Principles

Avoid or Limit Flashing Content

Respect User Motion Preferences

Modern browsers allow users to indicate reduced motion preferences via the OS.

Use the CSS prefers-reduced-motion media query:

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

Provide options to disable motion effects like parallax, auto-scrolling, or background video.

Provide Controls for Moving, Blinking, and Auto-Updating Content

Users must be able to pause, stop, or hide moving or blinking content that:

  • Starts automatically,
  • Lasts more than 5 seconds,
  • Is presented in parallel with other content.

Add pause or close buttons for:

  • Carousels/sliders
  • Auto-scrolling news tickers
  • Background video
<button aria-controls="carousel" aria-label="Pause slideshow">
	⏸ Pause
</button>

Time Limits Must Be Adjustable or Removable

If your content includes a time limit—like a form timeout or quiz timer—users must be able to:

  • Turn it off,
  • Extend it, or
  • Adjust it before encountering it.

Provide a warning and an option to extend time:

<p>
	Your session will expire in 2 minutes. 
	<button>Extend Session</button>
</p>

Avoid Auto-Playing Media or Background Animations

Auto-playing video or audio can disorient users, especially screen reader users.

Best Practices:

  • Do not auto-play audio.
  • If video auto-plays, ensure it is muted and can be paused.
  • Use a poster image and play button instead of immediate playback.

General Practices

Avoid Flashing Content

Never use content that flashes more than 3 times per second.

Respect Reduced Motion Preferences

Use the prefers-reduced-motion media query to turn off animations for users who request it.

Provide Pause/Stop/Hide Controls

For carousels, auto-updating feeds, or moving backgrounds.

Let Users Control Time Limits

Provide options to extend or disable time-based tasks and session timeouts.

Don’t Auto-play Media

Make all media user-initiated, especially if it includes sound.