Let users pause/stop/hide animation
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.
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 or GIFs:
- either needs to stop after five seconds, or provide a pause/stop mechanism like a play/pause button.
- Still needs audio descriptions, transcripts, and/or closed captioning depending on the content.
The Western pattern library includes a background video component for banners, which includes a pause animation button so users can stop the background video.
Microsoft Teams GIFs provide pause/play buttons so users can either play the GIF or pause whenever they'd like.