EPUB 3 Accessibility Guidelines

Video

When including video clips, ensure that the native reading system 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 by the reading system, 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 reader if the video element is not supported by the reading system, which typically only occurs in EPUB 2 reading systems.

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.

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 readers might be relying on fallbacks than you might at first anticipate.

Examples

Example 1 — Enabling native controls with the controls attribute
<video
   src="video/the_general.webm"
   controls="controls">
   …
</video>
Example 2 — Including more than one video option using the source element
<video controls="controls">
   <source
       src="video/the_general.webm"
       type="video/webm"/>
   <source
       src="video/the_general.mp4"
       type="video/mp4"/>
   …
</video>
Example 3 — Including timed tracks
<video controls="controls">
       src="video/big-hollywood-blockbuster.mp4"
       controls="controls">
   <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
<video
   src="video/the_general.mp4"
   poster="graphics/the_general.jpg"
   controls="controls">
   …
</video>
Example 5 — Including a fallback error message
<video
       src="video/the_general.mp4"
       controls="controls">
   …
   <div class="err">
      <p>
         Sorry, it appears your system 
         either does not support video 
         playback or cannot play the 
         MP4 format provided.
      </p>
   </div>
</video>

Compliance References and Standards

Additional Resources