<audio> elements must have a <track> for captions
<track>element must be present, with
kind="captions"set as a property. Captions are text—synchronized with the audio file—of the dialog, narration, and any important auditory information, for the benefit of deaf users.
The Algorithm, in Simple Terms
<audio>elements to ensure each contains a
<track>element with the
Why this is Important
Without a caption for an audio file, deaf users are not able to know the meaningful information that the audio conveys such as identifying who is speaking, its dialogue, and non-speech information conveyed through sound such as musical cues or sound effects. Captions provide the part of the content that is available via the audio track.
A lot happens in a video aside from dialogue. While a blind person has no problem hearing the dialogue in a movie, the person will miss out on important visual aspects of the video. Visual aspects can be made accessible using audio descriptions supplementing a video’s audio. In an audio description, the narrator speaks when there are gaps in speech and gives the context necessary to understand what is going on.
An HTML5 audio element (e.g.
<audio>) must have a caption provided using the
<track> attribute. To be most effective, the caption should convey all meaningful information that the audio conveys including dialogue, musical cues, sound effects, and other relevant information.
How to Fix the Problem
kind attribute of the
<track> element contains the value "captions". Ensure the caption text content conveys all meaningful information in the
<audio> element such as who is speaking, a transcript of the dialogue, musical cues, and sound effects.
The following code shows how to add two different tracks - one in English and one in Spanish:
<audio> <source src="mySpeech.mp3" type="audio/mp3"> <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions"> <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions"> </audio>
Captions and subtitles are not the same thing. Captions are necessary for deaf viewers to understand the content. Captions include a text description of all important background noises and other sounds, in addition to the text of all dialog and narration. Subtitles are generally language translations, to help listeners understand content presented in a language they don't understand. A Spanish audio file could contain English subtitles, for example. Subtitles generally include only dialog and narration.
Given these differences, you should specify
kind="captions" for deaf access, and not
src attribute gives the name of the track file. The
kind attribute describes the contents of the file. The
srclang attribute specifies the language of the track file using the appropriate HTML language code. The
label attribute provides a name for the track. None of these attributes, aside from
src, are required. Nevertheless, they are highly recommended since they increase clarity.