Features
Start a free trial

Ensure <video> elements have captions

Rule ID: video-caption User Impact: critical Guidelines: WCAG 2.0

Providing captions for <video> elements is essential to make multimedia content accessible to all users, including those who are deaf or hard of hearing.

About This Rule

This guideline ensures that video elements have captions, enhancing accessibility for users who are deaf or hard of hearing. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (A): 1.2.2 Captions (Prerecorded)
  • WCAG 2.0 (A): 1.2.2 Captions (Prerecorded)
  • WCAG 2.2 (A): 1.2.2 Captions (Prerecorded)
  • Section 508: 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
  • Trusted Tester: 17.A - The multimedia provides accurate captions for the audio content.
  • EN 301 549: 9.1.2.2 Captions (Prerecorded)

Why It Matters

Captions convey all meaningful audio information in a video, such as dialogue, musical cues, and sound effects. This ensures that users who cannot hear the audio can still understand the content.

How to Fix

To add captions to a video:

  • Use the <track> Element: Incorporate a <track> element within the <video> tag to specify the caption file.
    Copy code
    <video width="300" height="200" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English captions">
</video>
  • Ensure Captions Are Comprehensive: Captions should include all spoken dialogue, identify speakers, and describe non-speech sounds that are important for understanding the content.
  • Provide Captions in Multiple Languages if Necessary: If your audience is multilingual, consider adding caption tracks in different languages.
    Copy code
    <video width="300" height="200" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English captions">
  <track src="captions_es.vtt" kind="captions" srclang="es" label="Spanish captions">
</video>

Examples

Incorrect

A video element without captions:

Copy code
<video width="300" height="200" controls>
  <source src="myVideo.mp4" type="video/mp4">
</video>

Correct

A video element with an English caption track:

Copy code
<video width="300" height="200" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English captions">
</video>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: