<audio> elements must have a captions track
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Deafblind
- Deaf
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- Section 508
WCAG Success Criteria [WCAG 2.1 (A)]
- 1.2.1: MUST: Audio-only and Video-only (Prerecorded)
WCAG Success Criteria [WCAG 2.0 (A)]
- 1.2.1: MUST: Audio-only and Video-only (Prerecorded)
Section 508 Guidelines
- 1194.22: MUST: Web based intranet and Internet Information & Applications
- 1194.22 (a): MUST: A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
How to Fix the Problem
Ensure the 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>Note:
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 kind="subtitles".
The 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.
Why it Matters
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.
Rule Description
The track element must be present for each HTML5
audio element, 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)
Checks the use of all HTML5 <audio> elements to ensure each
contains a <track> element with the
kind attribute value "captions".
Resources
Deque University Course Pages (subscription required)
No related course information available.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: