WCAG autoplay video

Autoplay is where a video is set to start playing as soon as the web page loads its best to avoid this.

Generally, we recommend that videos not play automatically.

Fortunately, embedded video players from YouTube or Vimeo do not play automatically by default. And browsers like Chrome, Firefox, and Safari now usually block videos from playing automatically, even if the video itself is set to autoplay.

How autoplay reduces accessibility

Some people can find a video clip that starts automatically to be so distracting that it prevents them from being able to focus on anything else on the page or to listen to their screen reader.

Unexpected video or audio can be disruptive for people:

  • with cognitive impairments, like attention deficit hyperactivity disorder [ADHD] because it can impede their ability to concentrate on reading the content that theyre actually interested in
  • with vestibular and seizure disorders, like photosensitive epilepsy because it can cause a seizure
  • using text-to-speech software because it can obscure the speech of the screen reader.

How to disable autoplay

In most cases, you do not need to do anything to prevent videos from playing automatically.

This is because:

  • generally, YouTube and Vimeo videos embedded in s do not play automatically by default
  • videos embedded using the HTML element also do not play automatically by default.

However, there are some situations where YouTube or Vimeo videos could start playing automatically, depending on things like the users media viewing habits or browser settings.

If you want to be sure that a video will not play automatically for:

  • YouTube or Vimeo videos embedded in an add autoplay=0 to the URL assigned to the src attribute
  • videos embedded using the element make sure that the autoplay attribute is not present.

Examples of code

Video embedded in an

Setting the autoplay parameter to 0 ensures that the video will not play automatically when the page loads.

Video embedded using the element

No autoplay attribute ispresent.

Meeting the Web Accessibility Standard

When a video does not play automatically, it meets the following WCAG Success Criteria:

If a video is set to autoplay

If a videois set to play automatically, you must provide the user with the option to stop it if the clip:

  • plays any audio for more than 3 seconds
  • contains moving, blinking or scrolling information that lasts for more than 5 seconds.

How to enable controls to pause or stop the video

Controls for videos embedded in an

By default, YouTube and Vimeo videos include controls for pausing or stopping the video.

Other video players might behave differently, so its important to check that they provide such controls.

Controls for videos embedded using the HTML element

If you haven't created your own controls for the HTML element, make sure that the controls attribute is present. This tells the browser to provide controls for things like starting and stopping the video.

Example of code

The presence of the autoplay attribute tells the browser to automatically start playing the video when the page is loaded. As noted above, its recommended that you do not use the autoplay attribute.

The presence of the controls attribute ensures that users will have an easy way to stop and start the video.

Meeting the Web Accessibility Standard

If a video is set to play automatically and controls are provided to pause or stop the video, it meets the same WCAG Success Criteria as a video that is set not to play automatically:

However, to prevent a negative experience for some users, as described above, its best not to set your video to play automatically.

Testing that controls exist to pause or stop the video

If you need to set your video to play automatically, check that:

  • the video player has controls to pause or stop the video
  • the controls to pause or stop the video work for people operating it usinga mouse,a keyboard, ortouch.

More information

Read more about accessibility issues with media that plays automatically.

F93: Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays W3C

Utility links and page information

Video liên quan

Chủ Đề