Let users pause/stop/hide animation

Applicable Role(s): Content Creator, Developer


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 and Tips

Does the media require autoplay?

Unless autoplaying media content is required to convey its meaning, 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 a text 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 or GIFs:


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.


cow with hair blowing in wind GIF with play button


cow with hair blowing in wind GIF with pause button