Video Accessibility Guide: Captions, Audio Description, and Transcripts

Video accessibility ensures deaf, hard of hearing, blind, and deafblind users can access video content. WCAG requires captions for prerecorded audio (1.2.2), audio description for prerecorded video (1.2.3/1.2.5), and transcripts as alternatives (1.2.1). Without these accommodations, video content excludes millions of users—and creates legal liability.

This guide covers implementing accessible video: caption creation, audio description, transcripts, and accessible video player requirements for WCAG 2.1 AA compliance.

Q: What makes video WCAG compliant?

A: WCAG AA-compliant video requires synchronized captions for all audio content, audio description for visual information not conveyed in audio, and an accessible video player with keyboard controls. Transcripts provide additional accessibility for users who can't access video at all.

Caption Requirements

What Captions Include

Captions must convey all audio information:

Spoken content:

• All dialogue
• Who is speaking (when not obvious)
• Language changes

Non-speech audio:

• Sound effects relevant to understanding
• Music (described: "[upbeat jazz music]")
• Silence when meaningful

Quality standards:

• Synchronized with audio (within ~3 seconds)
• Readable pace (not exceeding 3 lines)
• Accurate transcription
• Proper punctuation and grammar

Caption Types

Closed captions (CC):

• Can be turned on/off by user
• Encoded in video file or provided separately
• Required for WCAG compliance

Open captions:

• Burned into video, always visible
• Cannot be turned off
• Used when player doesn't support CC

Subtitles:

• Translation of dialogue for different languages
• Don't include non-speech audio
• Not sufficient for accessibility alone

Caption File Formats

WebVTT (recommended for web):

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to TestParty's accessibility tutorial.

00:00:04.500 --> 00:00:08.000
[upbeat music]

00:00:08.500 --> 00:00:12.000
Today we'll cover how to make
your website accessible.

SRT (widely compatible):

1
00:00:01,000 --> 00:00:04,000
Welcome to TestParty's accessibility tutorial.

2
00:00:04,500 --> 00:00:08,000
[upbeat music]

3
00:00:08,500 --> 00:00:12,000
Today we'll cover how to make
your website accessible.

Caption Best Practices

Timing:

• Appear when audio begins
• Remain long enough to read (minimum 1 second)
• Don't extend beyond audio
• Synchronize within 3 seconds of audio

Formatting:

• Maximum 2-3 lines per caption
• Maximum 32-42 characters per line
• Center-align for readability
• Use mixed case, not ALL CAPS

Speaker identification:

WEBVTT

00:00:01.000 --> 00:00:03.000
Sarah: How can we improve accessibility?

00:00:03.500 --> 00:00:06.000
John: Start by adding captions to all videos.

Sound descriptions:

WEBVTT

00:00:10.000 --> 00:00:12.000
[phone ringing]

00:00:12.500 --> 00:00:14.000
[door slams]

00:00:15.000 --> 00:00:18.000
[tense orchestral music]

Audio Description

What Audio Description Is

Audio description (AD) narrates visual information for blind and low vision users. A narrator describes:

• Actions and movements
• Scene changes and settings
• On-screen text and graphics
• Facial expressions and body language
• Visual information essential to understanding

When Audio Description Is Required

WCAG 1.2.3 (Level A): Prerecorded video needs either audio description OR a full text alternative (transcript).

WCAG 1.2.5 (Level AA): Prerecorded video needs audio description.

Audio Description Approaches

Standard audio description: Description inserted during pauses in dialogue. Requires gaps in original audio.

Extended audio description: Video pauses to allow description when natural pauses are insufficient.

Integrated description: Original narration includes visual descriptions. Best for new content planning.

Audio Description Script Example

Original video: Product demo showing a user navigating a website

Audio description script:

[0:05] A laptop screen displays a website homepage
with a navigation bar across the top.

[0:12] The cursor moves to click on "Products"
in the navigation menu.

[0:18] A dropdown menu appears showing
five product categories with icons.

[0:25] The cursor hovers over "Running Shoes"
which highlights in blue.

Creating Audio Description

Production options:

1. Professional AD services: Specialized companies produce high-quality AD
2. In-house production: Record descriptions and mix with original audio
3. AI-assisted: Emerging tools generate AD drafts (requires human review)

Implementation:

<!-- Separate audio description track -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="descriptions"
         src="audio-descriptions.vtt"
         srclang="en"
         label="Audio Descriptions">
</video>

<!-- Alternative: Separate version with AD -->
<p>
  <a href="video.mp4">Watch video</a> |
  <a href="video-with-ad.mp4">Watch with audio description</a>
</p>

Transcripts

What Transcripts Include

Transcripts are text versions of video content including:

• All spoken content
• Speaker identification
• Non-speech audio descriptions
• Descriptions of visual information
• Timestamps (optional but helpful)

Transcript Benefits

Accessibility:

• Deafblind users with braille displays
• Users who can't play video
• Users who prefer reading
• Searchable content

SEO benefits:

• Search engines index transcript text
• Keyword-rich content
• Improved discoverability

Transcript Format

Basic transcript:

## Video Title: Making Your Website Accessible

**[0:00] Sarah:** Welcome to today's tutorial on web accessibility.

**[0:05]** [Image shows: TestParty homepage with accessibility
scanner running]

**[0:08] Sarah:** First, let's scan your website for
accessibility issues.

**[0:15]** [Sound: Click sound as button is pressed]

**[0:18] Sarah:** The scan takes about 30 seconds to complete.

**[0:25]** [Image shows: Results page displaying 15 issues found,
categorized by severity]

Placing Transcripts

On same page:

<video controls>
  <source src="video.mp4">
</video>

<details>
  <summary>Video transcript</summary>
  <div class="transcript">
    <!-- Transcript content -->
  </div>
</details>

Linked transcript:

<video controls>
  <source src="video.mp4">
</video>
<p>
  <a href="/transcripts/video-title.html">
    Read full transcript
  </a>
</p>

Accessible Video Players

Native HTML5 Video

<video controls
       aria-label="Product demo: TestParty accessibility scanner"
       poster="video-poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">

  <!-- Captions track -->
  <track kind="captions"
         src="captions-en.vtt"
         srclang="en"
         label="English captions"
         default>

  <!-- Audio description track (if supported) -->
  <track kind="descriptions"
         src="descriptions-en.vtt"
         srclang="en"
         label="English audio descriptions">

  <!-- Fallback for no video support -->
  <p>Your browser doesn't support video.
     <a href="video.mp4">Download the video</a> or
     <a href="transcript.html">read the transcript</a>.</p>
</video>

Required Player Controls

Accessible video players must include:

Keyboard accessible controls:

• Play/pause (Space or Enter)
• Volume control
• Seek forward/backward
• Full screen toggle
• Caption toggle

Visible focus indicators:

video:focus,
.video-controls button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Screen reader announcements:

• Current playback state
• Volume level
• Current time position
• Caption status

Third-Party Video Embeds

YouTube accessibility:

• Supports auto-generated captions (quality varies)
• Allows uploaded caption files
• Keyboard accessible player
• Add captions in YouTube Studio

<!-- YouTube embed with captions enabled -->
<iframe width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1"
        title="Video title describing content"
        allow="accelerometer; autoplay; clipboard-write;
               encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

Vimeo accessibility:

• Caption upload support
• Keyboard accessible
• Audio description support

Accessibility concerns with embeds:

• Always add title attribute describing video
• Verify caption availability
• Test keyboard navigation
• Consider providing transcript alongside embed

Custom Video Player Requirements

If building a custom player:

<div class="video-player" role="region" aria-label="Video player">
  <video id="main-video">
    <source src="video.mp4">
  </video>

  <div class="controls" role="toolbar" aria-label="Video controls">
    <button type="button"
            aria-label="Play"
            aria-pressed="false"
            class="play-pause">
      <span class="icon-play" aria-hidden="true"></span>
    </button>

    <div class="progress">
      <label for="seek" class="visually-hidden">Seek</label>
      <input type="range"
             id="seek"
             min="0"
             max="100"
             value="0"
             aria-valuetext="0:00 of 5:30">
    </div>

    <div class="volume">
      <button type="button" aria-label="Mute">
        <span class="icon-volume" aria-hidden="true"></span>
      </button>
      <label for="volume" class="visually-hidden">Volume</label>
      <input type="range"
             id="volume"
             min="0"
             max="100"
             value="100"
             aria-valuetext="100%">
    </div>

    <button type="button"
            aria-label="Toggle captions"
            aria-pressed="true"
            class="cc-toggle">
      CC
    </button>

    <button type="button"
            aria-label="Full screen"
            class="fullscreen">
      <span class="icon-fullscreen" aria-hidden="true"></span>
    </button>
  </div>
</div>

Autoplay Considerations

WCAG Autoplay Requirements

1.4.2 Audio Control: If audio plays automatically for more than 3 seconds, provide mechanism to pause/stop or control volume independently.

2.2.2 Pause, Stop, Hide: Moving/blinking/auto-updating content must have pause/stop mechanism.

Accessible Autoplay Implementation

<!-- Video autoplays muted - acceptable -->
<video autoplay muted loop playsinline>
  <source src="background-video.mp4">
</video>

<!-- Never autoplay with sound without user action -->
<!-- This is an accessibility failure: -->
<video autoplay><!-- Don't do this --></video>

If autoplay is necessary:

1. Start muted
2. Provide visible unmute control
3. Provide visible pause control
4. Ensure controls are keyboard accessible

Testing Video Accessibility

Automated Checks

TestParty identifies:

• Videos without caption tracks
• Missing video titles/labels
• Inaccessible embedded players
• Autoplay with audio issues

Manual Testing Checklist

Captions:

• [ ] All spoken content captioned
• [ ] Non-speech audio described
• [ ] Captions synchronized with audio
• [ ] Readable timing and formatting
• [ ] Speaker identification present

Audio description:

• [ ] Visual information described
• [ ] Description doesn't overlap dialogue
• [ ] Key visual elements narrated

Transcripts:

• [ ] Complete transcript available
• [ ] Visual information included
• [ ] Easily locatable

Player accessibility:

• [ ] All controls keyboard accessible
• [ ] Focus indicators visible
• [ ] Screen reader announces states
• [ ] Captions toggle works

FAQ Section

Q: Are auto-generated captions sufficient for WCAG?

A: Auto-generated captions (YouTube, etc.) often contain errors and lack non-speech audio descriptions. They're better than nothing but don't fully meet WCAG requirements. Review and correct auto-generated captions or create professional captions.

Q: Do I need both captions AND audio description?

A: For WCAG AA, you need captions for audio content and audio description for visual content. Many videos need both—captions for deaf users, audio description for blind users.

Q: Can a transcript replace captions?

A: For WCAG Level A, either captions OR a transcript can satisfy 1.2.2 for prerecorded video. However, Level AA specifically requires synchronized captions. Transcripts should supplement captions, not replace them.

Q: How do I add captions to YouTube videos?

A: In YouTube Studio: Videos → Select video → Subtitles → Add language → Add captions (upload file or type manually). Review auto-generated captions and correct errors.

Q: What about live video accessibility?

A: Live video requires real-time captions (CART services or live captioning). This is covered by WCAG 1.2.4 (Level AA). Many streaming platforms support real-time caption integration.

Key Takeaways

• Captions are required for all prerecorded audio content. Include speech, speaker ID, and non-speech sounds.

• Audio description is required at Level AA for visual content not conveyed in audio.

• Transcripts benefit many users and should supplement (not replace) captions and audio description.

• Video players must be keyboard accessible with proper focus indicators and screen reader support.

• Autoplay with audio is problematic. Start muted with clear controls to unmute.

• Third-party embeds need attention. Verify accessibility of YouTube/Vimeo embeds and provide transcripts.

Conclusion

Video accessibility ensures your video content reaches all users—not just those who can see and hear. Captions, audio description, and transcripts each serve different needs, and WCAG AA compliance requires addressing all of them.

The investment in video accessibility pays dividends beyond compliance: captions improve comprehension for all users, transcripts boost SEO, and accessible players work better for everyone.

TestParty identifies video accessibility issues across your site—missing caption tracks, inaccessible players, and autoplay problems. For e-commerce sites with product videos, this ensures all customers can access your video content.

Ready to make your videos accessible? Get a free accessibility scan to identify video accessibility issues across your site.

Related Articles:

• Multimedia Accessibility: Complete WCAG Guide
• Alt Text Guide: Writing Effective Image Descriptions
• WCAG 2.1 Time-Based Media Requirements

At TestParty, we're all about making accessibility achievable for everyone. AI helped us create this content so we can share more knowledge with the community. Our human team reviewed everything, but accessibility compliance varies widely—please consult with experts who understand your specific needs.