A Description of The Visual Content In Videos

When a video relies on visual information, such as actions, scene changes, or on-screen text, people who cannot see the screen (for example, screen reader users or blind users) miss that information unless it is described otherwise.

WCAG Success Criteria

1.2.5 Audio Description (Prerecorded) – Level AA
All prerecorded video content must include an audio description that conveys essential visual information for users who cannot see the screen.

1.2.3 Audio Description or Media Alternative (Prerecorded) – Level A
Provide either an audio description or a full text alternative for prerecorded video content so users who are blind or visually impaired can understand what happens visually.

How to Fix the Problem

Rule Description

An HTML5 <video> element containing prerecorded synchronised media must provide either:

• A <track> element with kind="descriptions" (for audio description), or
• A full-text alternative describing all visual and auditory content.

This ensures users who cannot see the video can still understand it fully.

There are two valid approaches:

Approach 1: Add an Audio Description Track

Use a <track> element with kind="descriptions" to include an audio description file.

<video controls width="400">
  <source src="training-video.mp4" type="video/mp4"/>

  <!-- Captions for dialogue and sounds -->
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default/>

  <!-- Audio description for visual elements -->
  <track src="audio_description_en.vtt" kind="descriptions" srclang="en" label="English Audio Description"/>

  Your browser does not support the video element.
</video>

Approach 2: Provide a Full Text Alternative

If an audio description is not possible, include a detailed text description that represents both the audio and visual content of the video.

<video controls width="400">
  <source src="training-video.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default>
  Your browser does not support the video element.
</video>

<!-- Text-based alternative -->
<div id="video-description">
  <h3>Full Text Description (Alternative for Time-Based Media)</h3>
  <p><strong>Scene 1:</strong> The video opens with a classroom. A title card reads “Teaching Evolution Case Studies - Bonnie Chen.”</p>
  <p><strong>Describer:</strong> A teacher shows photographs of birds with long, thin beaks.</p>
  <p><strong>Bonnie Chen:</strong> "These photos were all taken at the Everglades."</p>
  <p><strong>Describer:</strong> The teacher hands each student two flat, thin wooden sticks to simulate bird beaks.</p>
  <p><strong>Bonnie Chen:</strong> "Today you will pretend to be a species of wading bird that has a beak like this."</p>
  <p><strong>Describer:</strong> The teacher demonstrates by holding the sticks to her mouth like a beak.</p>
</div>

Why It Matters

People who are blind or visually impaired cannot perceive visual information like scene changes, actions, or facial expressions.

• Audio descriptions narrate these visual details during pauses in dialogue.
• Text alternatives provide the same information in written form, ensuring complete access to the media’s meaning.

Without these, users miss essential context and story elements, making the video content inaccessible.

The Algorithm (in Simple Terms)

1. Check every <video> element on the page.
2. Verify if it has a <track> with kind="descriptions".
3. If not, ensure a complete text alternative describing the video content is provided.
4. If neither exists, the video fails this accessibility rule.

Wrapping Up

Videos often communicate important details through visuals. When users cannot see the screen, audio descriptions or detailed text alternatives make sure they still receive the same information. Adding a description track or providing a clear written transcript ensures equal access and a complete understanding of the video content. This small step turns visual stories into inclusive experiences for everyone.