Missing Video Captions | Blue Frog Docs

Missing Video Captions

Diagnose and add captions and transcripts to video content for deaf and hard-of-hearing users

Missing Video Captions

What This Means

Video captions are synchronized text alternatives that display spoken dialogue, sound effects, and other audio information. Transcripts provide a full text version of video content. Without captions and transcripts, deaf and hard-of-hearing users cannot access video content, and all users miss out when audio is unavailable or unclear.

Impact on Your Business

Legal Compliance:

  • Required by WCAG 2.1 Level A (Success Criterion 1.2.2 Captions for Prerecorded Audio)
  • ADA Title III requires captions for public-facing video content
  • Section 508 mandates captions for federal content
  • Failure to provide captions is a common lawsuit trigger

User Experience:

  • 466 million people worldwide have disabling hearing loss
  • Over 5% of the world's population is deaf or hard of hearing
  • Captions benefit users in sound-sensitive environments (offices, libraries, public transport)
  • 85% of Facebook videos are watched without sound
  • Non-native speakers use captions to improve comprehension

SEO Benefits:

  • Search engines can index caption and transcript text
  • Improves video discoverability
  • Enhances keyword relevance
  • Increases dwell time and engagement

Business Benefits:

  • 80% increase in video completion when captions are available
  • 40% increase in views for captioned videos
  • Better user engagement and retention
  • Expanded global audience reach
  • Improved brand perception

How to Diagnose

  1. Play video on your website

  2. Look for caption controls:

    • CC button in video player
    • Captions/Subtitles menu option
    • Toggle to enable/disable captions

  3. Enable captions and verify:

    • Captions appear synchronized with audio
    • All dialogue is captioned
    • Sound effects are indicated
    • Speaker identification is clear
    • Captions are readable

What to look for:

  • ✗ No CC button or caption option
  • ✗ CC button present but captions don't work
  • ✗ Auto-generated captions with errors
  • ✗ Captions out of sync with audio
  • ✓ Working, accurate captions

Method 2: Check Video Source

For HTML5 video:

<!-- Video WITHOUT captions -->
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Video WITH captions -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>
  <track kind="captions" src="captions-es.vtt" srclang="es" label="Español">
</video>

What to look for:

  • Presence of <track> elements
  • kind="captions" or kind="subtitles"
  • Valid .vtt or .srt file paths
  • Language attributes (srclang)

For YouTube embeds:

  1. Click video to open on YouTube
  2. Click CC button
  3. Check if captions are available
  4. Settings → Subtitles/CC → verify quality

What to look for:

  • Manually created captions (preferred)
  • Auto-generated captions (needs review)
  • No captions available

For Vimeo embeds:

  1. Play video
  2. Look for CC button
  3. Check Settings → Captions
  4. Verify caption quality

Method 3: WAVE Browser Extension

  1. Install WAVE Extension
  2. Navigate to page with video
  3. Click WAVE icon
  4. Check Alerts section for:
    • "Video or audio content"
    • Warnings about multimedia

What to look for:

  • WAVE flags presence of video
  • Alerts remind you to verify captions
  • Manual check required (WAVE can't auto-verify captions)

Method 4: axe DevTools

  1. Install axe DevTools Extension
  2. Open Chrome DevTools (F12)
  3. Navigate to "axe DevTools" tab
  4. Click "Scan ALL of my page"
  5. Check for:
    • "Video element must have captions"
    • Multimedia accessibility issues

What to look for:

  • Video elements flagged
  • Caption requirements
  • Best practices violations

Method 5: Chrome DevTools Inspector

  1. Right-click video → Inspect
  2. Check for track elements:
<video>
  <source src="video.mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>
  1. Or use Console:
// Find all videos
const videos = document.querySelectorAll('video');
console.log(`Found ${videos.length} video elements`);

videos.forEach((video, index) => {
  const tracks = video.querySelectorAll('track[kind="captions"], track[kind="subtitles"]');
  console.log(`Video ${index + 1}:`, {
    src: video.querySelector('source')?.src,
    hasCaptions: tracks.length > 0,
    captionTracks: Array.from(tracks).map(t => ({
      language: t.srclang,
      label: t.label,
      src: t.src
    }))
  });

  if (tracks.length === 0) {
    console.warn(`⚠️ Video ${index + 1} has no captions!`, video);
  }
});

// Check embedded YouTube/Vimeo
const iframes = document.querySelectorAll('iframe[src*="youtube"], iframe[src*="vimeo"]');
console.log(`Found ${iframes.length} embedded videos (check manually for captions)`);

What to look for:

  • Videos without track elements
  • Track elements with broken src paths
  • Missing language attributes

Method 6: Lighthouse Accessibility Audit

  1. Open Chrome DevTools (F12)
  2. Navigate to "Lighthouse" tab
  3. Select "Accessibility" category
  4. Click "Generate report"
  5. Check manual checks section for multimedia requirements

What to look for:

  • Reminders to verify video captions
  • Multimedia accessibility checklist
  • Best practices recommendations

General Fixes

Fix 1: Add WebVTT Captions to HTML5 Video

Create caption file (video-captions.vtt):

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our product demonstration.

00:00:03.500 --> 00:00:07.000
Today we'll show you how to use our analytics platform.

00:00:07.500 --> 00:00:11.000
[upbeat music playing]

00:00:11.500 --> 00:00:15.000
First, let's log into the dashboard.

Add to HTML video:

<video controls width="640" height="360">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">

  <!-- Captions in multiple languages -->
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
    default
  >
  <track
    kind="captions"
    src="captions-es.vtt"
    srclang="es"
    label="Español"
  >
  <track
    kind="captions"
    src="captions-fr.vtt"
    srclang="fr"
    label="Français"
  >

  <!-- Fallback message -->
  <p>Your browser doesn't support HTML5 video.
     <a href="demo.mp4">Download the video</a> instead.</p>
</video>

Caption file best practices:

  • Use WebVTT format (.vtt) for web videos
  • Include speaker identification when multiple speakers
  • Indicate sound effects in [brackets]
  • Keep captions concise (32-38 characters per line)
  • Sync timing precisely with audio
  • Use proper punctuation

Fix 2: Add Captions to YouTube Videos

Method 1: Upload caption file (recommended)

  1. Go to YouTube Studio
  2. Select video from content list
  3. Click "Subtitles" in left menu
  4. Click "ADD LANGUAGE" → Select language
  5. Under Subtitles, click "UPLOAD FILE"
  6. Choose file type:
    • With timing (.srt, .vtt)
    • Without timing (YouTube syncs automatically)
  7. Upload your caption file
  8. Review and edit as needed
  9. Click "PUBLISH"

Method 2: Manual entry

  1. In YouTube Studio → Subtitles
  2. Click "ADD LANGUAGE" → Language
  3. Under Subtitles, click "ADD"
  4. Select "Type manually"
  5. Type captions as video plays
  6. YouTube auto-syncs timing
  7. Review and adjust timing
  8. Click "PUBLISH"

Method 3: Auto-generated (requires review)

  1. YouTube auto-generates captions for most videos
  2. In YouTube Studio → Subtitles
  3. Click on auto-generated captions
  4. Click "DUPLICATE AND EDIT"
  5. Correct errors:
    • Spelling mistakes
    • Punctuation
    • Speaker identification
    • Sound effects
  6. Click "PUBLISH"

Important:

  • Always review auto-generated captions
  • Auto-generated captions typically have 60-80% accuracy
  • Manual captions provide best user experience

Fix 3: Add Captions to Vimeo Videos

  1. Go to video settings on Vimeo
  2. Click "Distribution" tab
  3. Select "Subtitles"
  4. Click "+" to add subtitles
  5. Upload .srt or .vtt file OR Use Vimeo's caption editor
  6. Set language
  7. Choose whether captions are default
  8. Save changes

Vimeo Pro/Business features:

  • Automatic caption generation (paid feature)
  • Professional captioning service integration
  • Multi-language caption support

Fix 4: Create Caption Files

WebVTT format (.vtt):

WEBVTT

NOTE This is a comment, not displayed to users

00:00:00.000 --> 00:00:02.500
[Intro music]

00:00:02.500 --> 00:00:05.000
SPEAKER 1: Welcome to our tutorial.

00:00:05.500 --> 00:00:08.000
SPEAKER 2: Today we'll cover three topics.

00:00:08.500 --> 00:00:11.000
First, basic setup.

00:00:11.500 --> 00:00:14.000
[Mouse clicking]

00:00:14.500 --> 00:00:17.000
Second, configuration options.

00:00:17.500 --> 00:00:20.000
And third, advanced features.

SRT format (.srt):

1
00:00:00,000 --> 00:00:02,500
[Intro music]

2
00:00:02,500 --> 00:00:05,000
SPEAKER 1: Welcome to our tutorial.

3
00:00:05,500 --> 00:00:08,000
SPEAKER 2: Today we'll cover three topics.

4
00:00:08,500 --> 00:00:11,000
First, basic setup.

Caption formatting guidelines:

  • Timing: Captions appear when spoken
  • Duration: 2-6 seconds per caption
  • Line length: 32-38 characters per line
  • Lines: Maximum 2 lines per caption
  • Speaker ID: Use when multiple speakers
  • Sound effects: In [brackets] or (parentheses)
  • Music: Indicate with [music playing] or ♪ symbol

Fix 5: Add Transcripts

Provide full text transcript:

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

<details>
  <summary>View full transcript</summary>
  <div class="transcript">
    <h3>Video Transcript: Product Demo</h3>

    <p><strong>Introduction (0:00)</strong></p>
    <p>[Upbeat music playing]</p>
    <p>Welcome to our product demonstration. Today we'll show you how to use our analytics platform.</p>

    <p><strong>Getting Started (0:15)</strong></p>
    <p>First, let's log into the dashboard. Click the login button in the top right corner.</p>

    <p><strong>Dashboard Overview (0:30)</strong></p>
    <p>Once logged in, you'll see the main dashboard with your key metrics...</p>

    <!-- Continue with full transcript -->
  </div>
</details>

Transcript benefits:

  • Searchable text for SEO
  • Easy to copy/paste quotes
  • Better for users who prefer reading
  • Accessible to people with both hearing and vision impairments using braille displays

Transcript vs. Captions:

  • Captions: Synchronized with video, time-coded
  • Transcripts: Full text, not synchronized, includes descriptions
  • Best practice: Provide both

Fix 6: Use Video Platforms with Caption Support

Recommended platforms:

Platform Auto-Captions Manual Captions Caption Editor Cost
YouTube Yes (free) Yes Yes Free
Vimeo Yes (paid) Yes Yes Paid plans
Wistia Yes (paid) Yes Yes Paid
Vidyard Yes (paid) Yes Yes Paid

Integration example (YouTube):

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

URL parameters:

  • cc_load_policy=1 - Force captions on by default
  • cc_lang_pref=en - Set caption language preference

Fix 7: Caption Creation Tools and Services

DIY Tools:

  • YouTube Studio - Free, auto-generated + manual editing
  • Subtitle Edit - Free, open-source caption editor
  • Aegisub - Free, advanced subtitle editor
  • Kapwing - Free online video editor with captions
  • Rev Caption Editor - Free editor after ordering captions

Professional Services:

  • Rev.com - $1.50/minute for captions
  • 3Play Media - Captions, transcripts, audio description
  • Verbit - AI + human captioning
  • CaptionSync - Professional captioning service
  • Aberdeen Broadcast Services - Enterprise captioning

AI Tools (require review):

  • Otter.ai - Auto-transcription
  • Descript - Video editing with auto-transcription
  • Happy Scribe - Auto-transcription + professional services
  • Sonix - AI transcription in 40+ languages

Common Mistakes

  1. Relying solely on auto-generated captions - Always needs human review
  2. Missing sound effects - Captions should include [door closing], [phone ringing]
  3. No speaker identification - Confusing with multiple speakers
  4. Captions out of sync - Poor user experience
  5. Burnt-in captions only - Can't be turned off, not translatable
  6. No transcript provided - Captions alone aren't sufficient for all users
  7. Captions covering important visuals - Poor placement
  8. Wrong language labels - Confuses users
  9. Incomplete captions - Missing parts of dialogue
  10. Captions that are too fast - Hard to read

Caption Quality Checklist

Good captions should:

  • Be synchronized with audio
  • Include all spoken dialogue
  • Identify speakers when multiple people speak
  • Include sound effects in [brackets]
  • Indicate music and tone with descriptors
  • Use proper spelling and grammar
  • Be easy to read (2-6 seconds on screen)
  • Not cover important visual information
  • Be in correct language
  • Have accurate timing

Sound effect examples:

  • [applause]
  • [door slams]
  • [phone ringing]
  • [suspenseful music]
  • [laughter]
  • [dog barking]
  • [footsteps approaching]

Verification

After adding captions:

  1. Play video with captions:

    • Turn on captions
    • Watch entire video
    • Verify all dialogue is captioned
    • Check timing is accurate
    • Verify sound effects are included

  2. Test caption controls:

    • Can captions be turned on/off?
    • Can language be changed?
    • Do captions display correctly?
    • Are controls keyboard accessible?

  3. Review with screen reader:

    • Can video player be operated with keyboard?
    • Are caption controls announced?
    • Can user navigate caption menu?

  4. Check multiple devices:

    • Desktop browsers
    • Mobile devices
    • Tablets
    • Different video players

  5. Verify transcript:

    • Full transcript available
    • Transcript is accurate
    • Transcript is properly formatted
    • Transcript includes timestamps (optional but helpful)

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify Video Captions Guide
WordPress WordPress Video Captions Guide
Wix Wix Video Captions Guide
Squarespace Squarespace Video Captions Guide
Webflow Webflow Video Captions Guide

Additional Resources

↑ Back to top
// SYS.FOOTER