Skip to Content

Video

Use to display video on a page, includes accessibility tools.

How to Build

Make sure you are using the “backend editor” to build out the component.

  1. Click the Add New Element plus icon to add a component to the page.
  2. An Add Element window will appear, choose the Video option.
  3. The settings dialog box will appear. Fill in the appropriate fields.
    • Caption: Short caption which displays below the video
    • YouTube Url: The url to the YouTube video you wish to show.
    • Transcript: The written transcript of the video.
    • Text Description: Optional text description of the video to supplement the transcript.
    • Audio Description Link: Optional link to an audio description of the video.
  4. Click Save changes.
Video Accessibility

Videos are a great way to add engaging content to your website. However, videos require extra steps to make them accessible to people who are deaf, hard of hearing, or using a screen reader.

Captions

Captions are a synchronous (timed with the media) text version of the information conveyed through sound. They should capture dialog with speaker attributions, as well as other non-speech information and sound effects. Captions are required for all videos that contain information conveyed through sound.

Transcript

A transcript is like a full text version of the captions, formatted as HTML so it is screen reader accessible. A transcript is required for all videos that contain information conveyed through sound.

Description

Descriptions can be an audio recording or as a descriptive text transcript if audio description is not possible. Descriptions include all the information conveyed through sound, as well as visual information that is not conveyed through sound, including scenery, facial expressions, etc. A description is required if there is other information in the video that is important that is not conveyed through sound.

Figure caption

Figure captions are short overviews of the information in the video that appear adjacent to it. Figure captions are often useful, but they are not required for accessibility.

Exceptions

Note that these requirements are relevant for videos that contain information conveyed by sound that is not explicitly conveyed through other text on the page. For instance, if you have text on a page that describes all the features of a dorm in detail, and you have a video tour of the dorm on that page, you may not need captions or transcripts.

How to Make Videos Accessible

Use a Professional Service

Consider using a professional captioning service for making videos accessible. They are not free, but the quality and thus the user experience will be much better.

Do It Yourself

If it’s not possible to use a professional service for video accessibility, you can use your own resources to make videos accessible.

  1. Upload the video on YouTube
  • Edit the captions (required): Use YouTube’s automatic captions to create an initial draft of the captions. Note that automatic captions always require manual review and editing.
  • Add speaker attributions, description of sound effects and other important conveyed by sound. Edit for accuracy, add punctuation, and adjust the timing.
  • Learn more about using YouTube’s automatic captions.
  1. Create the transcript (required)
  • After you edit the captions, use YouTube transcript link to view all the captions at once; copy and paste them into the “Transcript” field for on the video component. (See “How to Build” tab for more information).
  • Format as needed to improve clarity, including adding line breaks and any necessary punctuation.
  1. Create a description (sometimes required)
  • If possible, record an audio described version of the video.
  • If that is not possible, create a text description.
  • Watch the video and provide a written describe all the relevant information that is not captured in the transcript and captions. This should include scenery, facial expressions, and objects and actions that are important but not conveyed with sound.
  1. Add a figure caption (not required)
  • Provide a 1-2 sentence overview of the contents of the video.

Examples

This is a caption

Transcript

This is a transcript

Description

This is a text description

Listen to an audio description of this video.

Video with no accessibility controls.

Read the Johns Hopkins University privacy statement here.

Accept