Add Captions to Video Content

Learn how to add captions and transcripts to videos for accessibility. Includes tools, code examples, and best practices.

6 min read

critical severityWCAG Level AWCAG 2.1 Success Criterion 1.2.2 and 1.2.3Auto-detectable

What Is It?

Captions are synchronized text displays of all audio content in videos (dialogue, sound effects, music cues). Transcripts are written versions of video content including descriptions of visual actions.

Affected users: Deaf and hard of hearing users, non-native speakers, users in noisy environments, users on silent mode, users with audio processing disorders

Why It Matters

About 466 million people globally have disabling hearing loss. Even hearing users benefit: learning new languages, noisy environments, focus issues. Videos without captions are often not indexed by search engines.

Good news: Automated caption generation (YouTube, Rev, Amara) can create captions, but human review is essential for accuracy, especially for technical content, names, and sound effects.

How to Detect This Issue

Play videos and check if captions are available. Turn on captions (usually CC button) and verify accuracy. Check if transcripts are available. Test with multiple video players.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)

<video width="640" height="480"><source src="video.mp4" type="video/mp4"></video>

After (accessible)

<video width="640" height="480"><source src="video.mp4" type="video/mp4"><track kind="captions" src="captions.vtt" srclang="en" label="English"></video>

Use <track> element with kind="captions" pointing to a WebVTT (.vtt) file. Include srclang and label. Provide multiple language tracks if applicable.

React / Next.js

Before

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

After

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

Add <track> element to your React video component. Mark as default to auto-enable captions. Consider adding multiple language tracks.

WordPress

Before

Video embedded via shortcode without captions

After

Video embedded with captions enabled. Use plugins like Subtitle or use YouTube videos (which have auto-generated captions).

WordPress video plugins often support captions. YouTube videos auto-generate captions. For self-hosted videos, use a plugin that supports track elements.

Shopify Liquid

Before

Shopify product video without captions

After

Product video with captions displayed. Use Shopify native video player or third-party accessible video player with caption support.

Ensure product videos on Shopify have captions. Use the built-in Shopify video player which supports captions, or integrate an accessible third-party player.

Common Mistakes

✗

Captions are hard to read (wrong color, size, or positioning)

✗

Captions don't include sound effects or music cues

✗

Auto-generated captions used without manual review and correction

✗

Transcripts exist but aren't linked or hard to find

✗

Captions only available in one language, ignoring multilingual audiences

Frequently Asked Questions

What's the difference between captions and subtitles?

Captions include all audio (dialogue, sound effects, music), while subtitles are usually just dialogue translation. For accessibility, use captions.

What format should captions be in?

WebVTT (.vtt) is standard for <track> elements. Also support other formats like SRT. Services like Rev or 3Play Media generate captions in multiple formats.

Should I use YouTube's auto-generated captions?

YouTube captions are 70-80% accurate automatically. Good starting point but review and correct them, especially for technical terms, names, and important details.

Do I need transcripts if I have captions?

Captions are helpful for video consumption. Transcripts are better for SEO, searchability, and users who prefer reading. Ideally provide both.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card

WCAG 2.1

ADA

Privacy