Let users pause/stop/hide animation

Applicable Role(s): Content Creator, Developer

Overview

Content that autoplays can distract site visitors with attention-related disabilities or vestibular disorders, which may prevent the visitor from being able to use the rest of the page. People that use screen readers may also experience autoplay while trying to listen to their screen reader audio—this makes it difficult to navigate a page, if not impossible.

Best Practices

Does the media require autoplay?

Unless the media content is essential for presenting the content, don't have media autoplay by default.

Consider if the content needs looping/auto-playing video

Instead of a background video, a hero banner with an overlay may communicate the message effectively, and is much easier to make accessible out of the box.

If media must autoplay

Animation like background video:

Pattern Examples

Banner Video

The Western pattern library includes a background video component for banners, which includes a pause animation button so users can stop the background video.

Mars Video with black overlay, and pause animation button in bottom left corner

Animated GIFs

Microsoft Teams GIFs provide pause/play buttons so users can either play the GIF or pause whenever they'd like.

Play

cow with hair blowing in wind GIF with play button

Pause

cow with hair blowing in wind GIF with pause button