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 1 — Enabling native controls

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

<video
   src="video/the_general.webm"
   controls="controls"
   aria-label="The General">
   …
</video>
Example 2 — Including more than one video option

When more than one format is available, the source element can be repeated to declare each. The user agent will pick a supported/preferred format from the list.

<video
       controls="controls"
       aria-label="The General">
   <source
      src="video/the_general.webm"
      type="video/webm"/>
   <source
      src="video/the_general.mp4"
      type="video/mp4"/>
   …
</video>
Example 3 — Including timed tracks

The track allows supporting information to be attached to a video, such as subtitles and captions. The kind attribute designates the nature of the supplied track.

<video controls="controls">
       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 4 — Including a poster image

The poster attribute is used to reference the poster image. This image is displayed when the user first encounters the video.

<video
   src="video/the_general.mp4"
   poster="graphics/the_general.jpg"
   controls="controls"
   aria-label="The General">
   …
</video>
Example 5 — Including a fallback error message

Content included inside the video element is only rendered if the element itself is unsupported. The content is not displayed if there are no supported 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>

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 control are accessible even if scripting is not available. If custom controls are provided and supported, the native controls can be disabled by JavaScript.

Although the video element allows child content for fallback purposes, such content is not intended to serve as an accessible alternative. It is only made available to the user if the video element is not supported (e.g, in EPUB 2 user agents).

The following methods for making video content accessible are instead recommended in the HTML5 specification:

The video element also includes the poster attribute to allow a default image to be set for display while no data is available. There is currently no way to describe this image, however, so text fallbacks should be preferred.

EPUB 3

Agreement on universal support for a video codec and container could not be reached in HTML5, and is a similar issue for EPUB 3. Although the EPUB 3 specification technically allows any format (without fallback), the IDPF recommends one or both of the MP4 and WebM formats be included. While this might not seem like an accessibility issue, consider that it means that many more users might be relying on fallbacks than you might at first anticipate.

References