Provide Captions for Live Video and Live Streaming
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
All live video with speech must include real-time captions.
Overview
Why this matters
Live events are often time-sensitive. Without live captions, deaf and hard-of-hearing users can miss announcements, decisions, and instructions in real time.
How to fix this issue
Enable real-time captions for every live stream with speech. Use CART or live caption tooling with active quality monitoring. Make caption controls easy to find and ensure captions remain readable and sufficiently synchronized.
Developer Guidance
Treat live captions as a go-live requirement in event runbooks. Before launch, verify caption source, operator ownership, and fallback plan. During broadcast, monitor latency/accuracy and correct critical caption errors quickly.
Code Examples
Incorrect Implementation
<video src="live-event-stream.m3u8" autoplay></video>
<!-- No live captions provided -->Correct Implementation
<video src="live-event-stream.m3u8" autoplay controls>
<track src="live-captions.vtt" kind="captions" srclang="en" label="English (Live)" />
</video>Real-World Implementation
Before
<iframe src="https://example.com/live-townhall"></iframe>
<!-- Critical policy updates are spoken, but CC is unavailable -->After
<iframe src="https://example.com/live-townhall"></iframe>
<p class="live-caption-status">Live captions available. Use CC to enable.</p>
<!-- Participants can follow updates in real time with captions -->CSS Example (Guidance)
/* Style caption toggle buttons for visibility */
.cc-button {
border: 1px solid #1e40b0;
padding: 4px 8px;
border-radius: 4px;
background: white;
color: #1e40b0;
font-weight: 500;
}
.cc-button:hover {
background: #1e40b0;
color: white;
}Manual Testing
- 1. Run a live stream test with real spoken content and normal event pace.
- 2. Confirm captions can be enabled quickly from player controls.
- 3. Verify caption latency is low enough to follow discussion in context.
- 4. Check accuracy for names, numbers, and key terms at multiple timestamps.
- 5. Validate fallback process when auto-captioning quality drops.
- 6. Confirm caption rendering stays readable and does not obscure critical visual content.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance