<audio> elements must have a captions <track>

Rule ID: audio-caption
Ruleset: axe-core 3.1
User Impact: Critical
WCAG: 1.2.1
You are viewing older version of the axe rule.
Go to the latest version (3.2)

Accessibility Testing Designed for Developers - No Training Required

Join Deque's exclusive beta testing community and help us reach our goal of accessibility as standard part of every sprint by 2022.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Deafblindness
  • Deafness

Requirement(s)

  • WCAG 2.1 (A): MUST
  • WCAG 2.0 (A): MUST
  • Section 508: MUST

WCAG Success Criteria

  • 1.2.1 Audio-only and Video-only (Prerecorded)

Section 508 Guidelines

  • 1194.22 (a) Text equivalent for non-text elements

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 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.

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

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 3.1 rules.