Let users pause/stop/hide animation
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 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:
- either needs to stop after five seconds, or provide a pause/stop mechanism like a play/pause button.
- Still needs alt text, audio descriptions, transcripts, and/or closed captioning depending on the content.
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.
Animated GIFs
Microsoft Teams GIFs provide pause/play buttons so users can either play the GIF or pause whenever they'd like.
Play
Pause
