universal-design-center

  • A cellphone playing a video with captions

    Web Accessibility Criteria: Interactive Media

Web Accessibility Criteria - Interactive Media

  Description

It is important to provide equal access opportunities to all interactive media. This includes media that is audio-only such as podcast, .mp3’s, audio recordings, and teleconferences and media that is audio-video such as YouTube videos. When multimedia is used, alternatives to multimedia files in the form of transcripts, captions and audio descriptions must be provided. Multimedia files must also have controls to allow users to pause, stop and restart the multimedia files. Finally, when multimedia is embedded into a website, a notification must be incorporated within the HTML code for browsers who cannot support embedded content.  

Alternatives for Multimedia Content

Transcriptscaptions and audio descriptions should always be incorporated into multimedia files. 

Transcripts 

Transcripts are text versions of multimedia files. Transcripts can be used for videos or audio recordings. Transcripts are typically useful for users to download and have access to the text of the media.

Captions

Captions are transcripts that are synchronized with the video or audio. If the media has captions, it does not require a transcript. There are two types of captions: 

      • Closed captioning are captions that can be turned off and on by the user.
      • Open captioning are captions that remain on screen and cannot be turned off.

Audio Descriptions

Audio descriptions describe the visuals that are portrayed in the video. Examples of what can be included in an audio description are if the video includes diagrams or charts.

User Controls 

A pause, stop, and restart feature should always be incorporated within a multimedia file. This will allow users the ability to control when the content is played. 

Embedded Multimedia 

For multimedia content that is embedded via the <embed> element, it requires an additional element called the <no embed> which is used to direct a user to alternative content when their browsers cannot support the embed content.  Modern coding practices and video players, however, should prevent users from having to use this alternative. For instance, the <object> element, is the more modern method to embed multimedia files into a webpage.  

back to top

 

  Why is interactive media important?

Interactive media must be accessible to ensure equal access opportunities for all users with different access needs. Including transcriptions, captions or audio descriptions into interactive media will help benefit the following users:

  • Users that are deaf or hard of hearing
  • Users that have cognitive disabilities
  • Users who are non-native speakers
  • Users who are visual learners

Alternative descriptions for interactive media will ultimately provide users with needed information to help them understand the content in these files. Transcripts, captions and audio descriptions will also make it easy for all users to interpret what is being said. In cases where the audio quality that is poor (e.g. background noise) and users find it difficult to understand what is being said in the media file, captions, transcripts or audio descriptions will allow them to fill in information that they are unable to hear. 

back to top


508/WCAG 2.0 Summary of Requirement

All video and multimedia productions that contain speech or audio that is necessary for the comprehension of the material must be captioned. Moreover, all video and multimedia productions that contain visual information that is necessary for the comprehension of the content shall be audio described (US Access Board).

Best Practices

To ensure all interactive media is accessible, the following best practices must be followed: 

  • All videos must be captioned!
  • Audio only files must have audio descriptions associated.
  • If podcasts or other audio-only files are posted, such as .mp3’s, on a website, they must include text transcripts. Additionally, content creators are able to create a separate HTML page containing the transcript.
  • Always manually input the captions instead of relying on auto-generated captions. Automatic captions typically display inaccurate information. Sound quality, accents or mispronunciations typically affect automatic captions and cause the wrong text to be displayed.  
  • Time management when developing interactive media alternatives is key. When creating an interactive media file, it is best to consider accessibility from the beginning. It takes time to create media files and adding the alternative descriptions during development will streamline the process.
  • It is recommended to post transcripts of media files on your website. The transcripts can be in HTML or a separate text file. Adding transcripts will help with site indexing and search engine optimization.
  • Include adjustable features for captions. Users should be able to adjust the captions size, font, and color contrast.
  • In HTML5, the track element allows for specific subtitles for a video. It allows the content creator to have control over the language and subtitle information.
  • The <object> element is used to embed multimedia such as videos, audio, PDF, Flash, and Java applets in a webpage. Content within the element can contain images or non-text content such as links. When applying applets it is recommended to use the <object> element because the <applet> element is no longer used.

For more information, visit our Captioning website

Examples

Transcripts

The screenshot below is of a video from the CaptionSync website that portrays the use of transcripts. This example demonstrates the two methods transcripts can be incorporated; as interactive transcripts or automated transcripts.

Transcript Example displaying interactive transcripts and automated transcripts

 (Derived from: CaptionSync- Whiteboard Wednesday April 26, 2017 Video)

Captions

The example below is an example of a video with captions. The captions in the video can be turned on and off.

(Derived from: YouTube- Captioning Example Using video about Coffee) 

back to top

Audio Descriptions

The example below is a video demonstrating descriptive audio descriptions. This video is a portion of Disney's the Lion King with audio descriptions describing the first few minutes of the film.

(Derived from: YouTube- Descriptive Video demo on The Lion King)

back to top

How to Test

Manual Review

  1. Visually review if the transcripts, captions or audio descriptions have the correct text and are synchronized with the media.
  2.  Inspect multimedia content to determine if pause, stop and play controls are incorporated within the file. 
  3. Verify if embedded content is accessible to all users including assistive technology users. If content is not accessible, it is recommended to use a different embedding methods or multimedia file types. However, if no other alternative is possible, the <noembed> tag must be incorporated. 

Automated Testing Tools

Compliance Sheriff

To identify interactive media in Compliance Sheriff, Section B of the CSU ATI Accessibility Requirements can be used. 

Resources