Summary

Ensure the video is labeled, the user can control playback, and there are alternatives for users who cannot see or hear the video or who need more time to process the information.

Techniques

Examples

Example — Enabling native controls

Setting the controls attribute enables the native HTML controls by default.

<video … controls="controls">
   …
</video>
Example — Adding a label

The aria-label attribute provides the title of the video.

<video … aria-label="The General">
   …
</video>
Example — Including timed tracks

The track identifies the subtitles and captions files for the video. The kind attribute designates the nature of the supplied track.

<video
       src="video/big-hollywood-blockbuster.mp4"
       controls="controls"
       aria-label="Kaplowy - The movie">
   <track
      kind="subtitles"
      src="subtitles.en.vtt"
      srclang="en"
      label="English"/>
   <track
      kind="captions"
      src="captions.en.vtt"
      srclang="en"
      label="English"/>
</video>
Example — Providing a transcript

The transcript is included in a details element after the video so that users can decide whether to expand the element and read the text.

<video
      src="video/the_general.mp4"
      controls="controls"
      aria-label="The General"
      aria-details="#transcript">
   …
</video>
<details id="transcript">
	<summary>Transcript</summary>
	<p>Jospeh M Schenck presents Buster Keaton
	   in 'The General' …</p>
	…
</details>
Example — Including a fallback error message

A user agent will only render the content inside the video element if it does not support the element. The user agent does not display this content if it does not support the provided video formats (the user agent will display its own error message in such cases).

<video
      src="video/the_general.mp4"
      controls="controls"
      aria-label="The General">
   …
   <div class="err">
     <p>
       Sorry, it appears your system 
       does not support video playback.
     </p>
   </div>
</video>
Example — Video with variety of accessible features

This example combines elements from the previous examples to show a possible complete example of an embedded video. It includes English subtitles and captions, fallback content, a link to a web-hosted version, and a transcript.

<video
      src="https://example.com/videos/the_general.mp4"
      controls="controls"
      aria-label="general"
      aria-details="#transcript">
   <track
      kind="subtitles"
      src="subtitles.en.vtt"
      srclang="en"
      label="English"/>
   <track
      kind="captions"
      src="captions.en.vtt"
      srclang="en"
      label="English"/>
   <p>Your reading system does not support the video
      element. Please try the link to open the video in a
      browser.</p>
</video>
<p>
   <a href="https://example.org/videos/the_general.mp4">
      Watch video in browser
   </a>
</p>
<details id="transcript">
   <summary>Transcript</summary>
   <p></p>
   …
</details>
Example — Link to alternative video

Although not strictly an accessibility issue, when an EPUB publication references a video on the web, providing a separate link to the video may allow some users to access the video when they are prevented from doing so by their reading system (e.g., if the reading system blocks external resources or cannot play the provided format). Refer to the knowledge base page on remote resources for more information.

Note that this technique does not help if a user does not have access to the internet, which is why embedding videos in EPUBs should be preferred whenever possible.

Accessibility features have been omitted from the markup for brevity.

<video src="https://example.org/videos/the_general.mp4" …>
   …
</video>
<p>
   <a href="https://example.org/videos/the_general.mp4">
      Watch video in browser
   </a>
</p>

Explanation

When including video clips, ensure that the native user agent controls are enabled by default (i.e., by setting the controls attribute on the video element). This practice ensures that the controls are accessible even if scripting is not available. If you define your own custom controls, disable the native controls by JavaScript so they remain available in user agent that do not support scripting.

Providing a label for videos ensures that users can understand the purpose of the video before choosing whether to view it. The poster image that authors can specify to provide a snapshot of the video for visual readers, for example, is not available to users who are blind. The label is the only means of understanding the content without downloading it for these users. For users on mobile devices, especially with high bandwidth costs, this information can save them both time and money.

In terms of providing alternatives, WCAG requires multiple options for video content to address the needs of different user groups:

WCAG refers to transcripts as "media alternatives" because they cannot be a simple listing of the spoken dialogue. The transcripts must include descriptions of the actions and any other important events in the video.

Progressing from level A to AA also increases the requirement. Transcripts are not sufficient to for video with audio at level AA, for example, only an audio description track is sufficient.

Although the video element allows child content for fallback purposes, such content is not intended to serve as an accessible alternative. The user agent only makes this content available to the user if it does not support the video element (e.g., in EPUB 2 user agents).

It is also important to consider that users need to be able to hear the audio produced by their assistive technologies (e.g., a screen reader). Automatically playing a video with audio interferes with their ability to hear the text, for example, so unless the clip only plays for three seconds or less, the user must be able to disable playback or mute the volume without also muting their assistive technology (i.e., the system audio control is not sufficient to meet this requirement as it will raise and lower all audio in synchronicity).

Related Links