Accessible Video Captions: Ensuring Equal Access
Rule ID: video-caption
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549
How to Fix the Problem
To ensure accessibility for deaf and hard-of-hearing users, every <video>
element on a webpage must include at least one <track>
element with the kind="captions"
attribute. This track must provide complete and accurate text representations of:
-
Spoken dialogue
-
Identification of speakers
-
Relevant non-speech audio (e.g., laughter, applause, music, sound effects)
Example Code Implementation:
Important Notes:
-
Captions vs. Subtitles: Captions include non-verbal sound cues and speaker IDs; subtitles usually only translate dialogue.
-
Always use
kind="captions"
for accessibility purposes, notkind="subtitles"
. -
While only the
src
attribute is required, includingsrclang
andlabel
enhances usability and clarity. -
YouTube Tips: Though YouTube offers automatic captioning, it’s often inaccurate. However, uploading a transcript for auto-synchronization can produce accurate results with minimal editing.
Why it Matters
Captions are essential for ensuring deaf or hard-of-hearing users can understand video content. Without them, such users miss out entirely on any dialogue, narration, or contextual audio cues. This creates a significant accessibility barrier, especially in educational, informational, and instructional content.
Lack of captions can prevent:
-
Understanding key points made through speech
-
Interpreting mood or tone conveyed through music or sound
-
Following plotlines or action triggered by audio cues
By providing accurate captions, you’re making content inclusive and compliant with legal and ethical accessibility standards.
Rule Description
Each <video>
element must have at least one <track>
element with kind="captions"
to describe the video’s audio content in a textual format. Captions should accurately represent all important sound-based information—not just spoken words.
The Algorithm (in simple terms)
-
Search all
<video>
elements in the HTML. -
Check if any
<track>
child element haskind="captions"
. -
Confirm the
src
of the track file is provided and valid. -
Recommend adding
srclang
andlabel
for better user experience.