Subtitle Concepts and Examples

Status: This is an incomplete, unapproved draft. The current draft is at wai-media-guide.netlify.com/

Subtitle basics

Subtitles (also known as foreign-language subtitles) are, from a technical perspective, similar to captions: they are text (or sometimes images of text) presented through markup that contains timing information and positioning codes. They can be created using the same authoring tools as captions, and they can also be delivered using the same basic timed-text markup formats:

And, as with captions, they can be open or closed:

  • Closed subtitles can be hidden and revealed by users, typically by operating a button or menu on the player's control bar.
  • Open subtitles are continually displayed and cannot be turned off.

In instances where subtitles cannot be presented using true text, they can instead be presented as bitmaps: in other words, pictures of text or other symbols. The bitmaps themselves can still be transmitted using markup, though, by using TTML Profiles for Internet Media Subtitles and Captions 1.0 (IMSC1). Bitmap subtitles/captions cannot be customized by users, which may diminish their usefulness to viewers with certain types of visual impairments. Learn more about why caption customization is important.

Differences between subtitles and captions

Subtitles are not the same as captions, nor are they aimed at the same audiences. Here are some of the basic differences.

Subtitles Captions
Intended for people who can hear Intended for people who are deaf or hard of hearing
Translation of the audio Same language as the audio
Do not contain non-speech information
(indications of music, sound effects, etc.)		 Contain non-speech information
Not positioned to indicate who is speaking Often positioned to indicate who is speaking

Delivering subtitles to viewers

Subtitles are delivered to viewers using HTML5's <track> element. <track> is used as a child element of the <video> element. Be sure to set the value of the kind attribute to "subtitles" and to specify the language in the label attribute:

Code snippet: 
<video controls>
    <source src="myvideo.mp4" type="video/mp4" />
    <track kind="subtitles" src="my_italian_subtitles.vtt" srclang="en" label="Italian" default />
</video>

In some cases, it may be necessary to use captions and subtitles together: for example, if an important sound effect is used in the audio track, that sound can be conveyed through a single sound-effect caption placed near the a subtitle, as shown in the image below.

A frame of video showing a sound-effect caption positioned above a subtitle.

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combines the following WCAG 2.0 success criteria and techniques from different conformance levels:

Success Criteria:

  • 1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

Techniques: