Transcripts

title: "Transcripts — Complete Text Alternatives for Audio and Video" description: "Learn how to create accessible transcripts for audio and video content that include dialogue, descriptions, and speaker identification." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, media]

Transcripts provide a complete text version of audio and video content including dialogue, audio descriptions, and speaker identification.

## What You'll Learn

How to create accessible transcripts that serve as complete alternatives to media content.

## Why It Matters

Transcripts benefit deaf, hard of hearing, blind, and low vision users. They also help users who prefer reading, users with slow internet, and search engines.

## Real-World Use

A user has a slow internet connection on a train. Instead of streaming a video tutorial, they read the transcript. The transcript includes all dialogue, descriptions of actions, and code examples.

## Interactive Transcript

```html
<video id="tutorial-video" controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" default>
</video>

<div id="transcript" aria-label="Video transcript">
  <p><a href="#t=10" data-time="10">0:10</a> Welcome to the tutorial.</p>
  <p><a href="#t=15" data-time="15">0:15</a> Today we will cover accessibility.</p>
  <p><em>[Presenter opens code editor]</em></p>
  <p><a href="#t=22" data-time="22">0:22</a> First, let us look at the HTML structure.</p>
</div>

Simple Transcript

<details>
  <summary>Video transcript</summary>
  <div class="transcript">
    <p><strong>0:00 - 0:05</strong> Welcome to the DodaTech accessibility tutorial.</p>
    <p><strong>0:05 - 0:10</strong> Today we will learn how to add captions to video.</p>
    <p><em>[Presenter opens a code editor and types HTML]</em></p>
    <p><strong>0:10 - 0:15</strong> First, create a WebVTT file with your caption text.</p>
  </div>
</details>

Common Mistakes

1. Transcript is not complete

Transcripts must include dialogue, audio descriptions, and visual information.

2. No speaker identification

When multiple speakers, identify each: "NARRATOR:", "INTERVIEWER:", "GUEST:".

3. Transcript not near the media

Place the transcript immediately before or after the video/audio element.

4. No timestamps

Timestamps help users find specific parts of the media.

5. PDF transcript only

HTML transcripts are preferred. PDFs are harder for screen readers to navigate.

Practice Questions

1. What should a complete transcript include? Dialogue, speaker identification, sound effects, music descriptions, and visual action descriptions.

2. Why are timestamps useful in transcripts? They help users find specific sections and follow along with the media.

3. Should the transcript be visible or behind a toggle? Both work. A toggle (details/summary) saves space. A visible transcript is immediately available.

Challenge: Create an interactive transcript where clicking a timestamp jumps the video to that position.

FAQ

Mini Project

Create an HTML transcript for a 3-minute video. Include timestamps, speaker identification, descriptions, and clickable links that seek the video.

What's Next

Learn about Sign Language and how to provide sign language interpretation for video content.