← Back to Accessalyze

How to Make Videos Accessible on Your Website

WCAG Requirements for Video

Captions: The Most Important Requirement

Captions must be:

• Synchronized — appear at the same time as the audio they describe
• Accurate — verbatim transcript, not a paraphrase
• Complete — includes speaker identification when multiple speakers, important sounds like [applause] or [siren], and music that conveys meaning
• Positioned correctly — not covering important visual content

YouTube Auto-Captions

YouTube generates automatic captions but they are often 80–90% accurate — meaning 10–20% errors. This does not meet WCAG. You must review and correct auto-captions before the video is published.

How to correct YouTube captions: YouTube Studio > Your video > Subtitles > Edit the auto-generated captions.

Adding Captions to HTML5 Video

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

  <!-- WebVTT caption file -->
  <track kind="captions"
         src="product-demo-en.vtt"
         srclang="en"
         label="English captions"
         default>

  <!-- Audio description track -->
  <track kind="descriptions"
         src="product-demo-audiodesc-en.vtt"
         srclang="en"
         label="English audio descriptions">
</video>

WebVTT Caption File Format

WEBVTT

00:00:01.000 --> 00:00:04.500
Welcome to the Accessalyze dashboard.

00:00:04.500 --> 00:00:08.000
In this video, we'll show you how to
run your first accessibility scan.

00:00:08.000 --> 00:00:11.500
[Clicking sound] Enter your website URL
in the search bar at the top.

00:00:15.000 --> 00:00:19.000
[Sarah] The results show 12 violations,
organized by severity.

Audio Description

Audio descriptions narrate visual information that isn't communicated in the audio track — what's happening on screen, text that appears, charts being shown.

Example: A screen recording shows someone clicking through a form. The narration only says "fill out the form." A blind user hears nothing about what fields are on the form. Audio description would add: "The form has three fields: name, email, and company. Click the Name field and begin typing."

You can provide audio descriptions by:

• Re-recording the video with descriptions woven into the narration (best)
• Creating a separate audio description track
• Providing a detailed text transcript that includes all visual information

Transcripts

A transcript is a text version of all spoken content (and ideally visual content). It serves users who:

• Are deaf-blind (use braille displays)
• Prefer reading over watching
• Want to copy/search/translate content
• Cannot use audio at all

Provide transcripts as HTML text near the video (not as a downloadable PDF) so they're searchable and screen-reader accessible.

Accessible Media Player

The video player itself must be keyboard accessible. Test:

• Can you Tab to the Play/Pause button?
• Can you activate controls with Enter/Space?
• Is volume adjustable by keyboard?
• Is the fullscreen button keyboard accessible?
• Are all controls labeled (not just icons)?

YouTube's embedded player and most modern HTML5 players are keyboard accessible. Custom players require careful implementation.

Auto-Playing Video

If a video auto-plays with audio, WCAG 1.4.2 requires a mechanism to pause or mute it within the first three seconds of reaching the page. Auto-playing video is also distracting for users with attention or cognitive disabilities. Best practice: never auto-play audio. Video-only (muted) auto-play is more acceptable.

← Back to Accessalyze