Don't auto-play video, music and more
Table of Contents
Not auto-playing your media will make everyone happy.
People using screen-readers navigate by listening, so any sound playing when the page loads will interfere immensely. It will also be frustrating to any person that may be listening to music or is in a quiet area with their sound on high.
In a note on audio control, the Web Content Accessibility Guidelines (WCAG) suggests:
Therefore, we discourage the practice of automatically starting sounds (especially if they last more than 3 seconds), and encourage that the sound be started by an action initiated by the user after they reach the page, rather than requiring that the sound be stopped by an action of the user after they land on the page.
Some groups of people may have a problem with moving content on a web page that starts without warning. This includes people with certain types of learning difficulties who can find it hard to concentrate or focus on tasks when distractions are present.
The HTML5 specification includes the
autoplay attribute along with the following provisions:
Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader.
Even though an
autoplay attribute is included they also suggest:
Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
What if you can't say no?
As web developers, we don't always have the luxury of making business decisions, so there are a couple of recommendations to follow:
- Ensure media lasts for five seconds or fewer before stopping for good.
- If media lasts over five seconds, you must provide the user with an option to stop or pause it.
It is also considered good practice to indicate a link will navigate to a location that contains auto-playing media. For example, a link to YouTube could be written as, "Beethoven - Moonlight Sonata (YouTube)".
- Accessibility of animations and transitions from Microsoft Microsoft Docs
- Auto-play: a usability and accessibility failure A Pretty Simple blog
- Autoplay is bad for all users Punkchip
- Autoplay blues Michael McWatters
- Video Usability Nielsen Norman Group
- Animations are Distracting! (Video) Nielsen Norman Group
- prefers-reduced-motion - CSS: Cascading Style Sheets MDN web docs
- Responsive Design for Motion WebKit