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 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 — 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>

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