Animation Pause Controls

Animation pause controls allow users to stop auto-playing, moving, or blinking content. These controls address accessibility needs for users who find motion distracting, disorienting, or physically uncomfortable.

What Are Animation Pause Controls

Pause controls are interface elements that stop or pause animated content. Auto-playing videos, animated carousels, decorative motion graphics, and blinking elements all benefit from pause functionality.

WCAG Success Criterion 2.2.2 (Pause, Stop, Hide) requires that for moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and appears alongside other content, users can pause, stop, or hide it.

This requirement recognizes that auto-playing motion can distract from adjacent content, cause disorientation, or prevent users with cognitive disabilities from processing information at their own pace.

How Animation Pause Controls Work

Pause buttons should be visible and easily discoverable. For video content, standard play/pause controls in or near the video provide expected interaction. For carousels and slideshows, a visible pause button in the control area fulfills the requirement.

The pause state should persist until the user explicitly resumes. Auto-resuming after a period defeats the purpose. Users who pause content need it to stay paused.

Focus behavior provides implicit pausing: when any element within auto-playing content receives keyboard focus, the motion should pause. This allows keyboard users to navigate and interact without fighting against movement.

Hover can also trigger pausing, though this should supplement rather than replace explicit controls since not all users have hover capability.

Implementation varies by content type:

• Videos: Native video controls or custom play/pause button
• Carousels: Pause button that stops auto-advance
• CSS animations: Pause button that applies animation-play-state: paused
• JavaScript animations: Pause button that calls animation API pause methods

The pause control needs an accessible label indicating current state and available action: “Pause slideshow” when playing, “Play slideshow” when paused. Screen readers announce this state.

Key Considerations

• Provide visible pause controls for all auto-playing animated content
• Ensure pause state persists until user explicitly resumes
• Pause on focus when keyboard users navigate into animated content
• Label pause controls with current state and action
• Position controls where users expect them (near the content they affect)
• Auto-pause animations lasting more than five seconds per WCAG
• Consider pausing all site animations with a global control

Common Questions

What content needs pause controls?

Pause controls are required for content that:

• Moves, blinks, or scrolls automatically
• Starts without user interaction
• Lasts more than five seconds
• Appears alongside other content users might want to read

Exceptions include essential animations (where removing motion would fundamentally change functionality) and loading indicators (where the motion is brief and informational).

Should sites offer global animation controls?

A global setting to pause all animations can benefit users who find animation broadly problematic. This supplements the prefers-reduced-motion system setting by providing in-site control.

Global controls work well as a site preference, storing the setting for return visits. This provides user control beyond what system settings offer.

How should pause controls work with keyboard navigation?

When focus enters auto-playing content, motion should pause automatically. This allows keyboard users to navigate carousel items or interact with video controls without the content changing underneath them.

The explicit pause button should also be keyboard accessible. Focus should move logically to pause controls so keyboard users can find and activate them easily.

Summary

Animation pause controls meet WCAG requirements by letting users stop auto-playing content that may distract or disorient. Visible pause buttons, focus-based pausing, and persistent pause states ensure users control their experience with animated content.