Accessible Audio and Video

Audio and video can teach, entertain, and persuade, but only if people can get at them. A video with no captions is silent to a deaf viewer. A chart shown only in a video is invisible to a blind one. A looping background can make someone dizzy.

This lesson pulls the whole section together. It covers what each group of people needs, which HTML features give it to them, and a practical checklist you can use on every page.

What You Will Learn

• What different viewers need from audio and video
• Captions, transcripts, and audio description
• Keyboard-friendly controls
• Autoplay, audio control, and pause buttons
• Motion, flashing, and seizure safety
• Labelling players and embedded videos
• A checklist for every kind of media

Who Are We Building For?

Viewer	Barrier	What helps
Deaf or hard of hearing	Cannot hear speech or sounds	Captions, transcripts, visual alerts
Blind or low vision	Cannot see the picture	Audio description or a text alternative, accessible controls
Motor or mobility difficulties	Cannot use a mouse, or need larger targets	Keyboard access, big controls, no time limits
Cognitive or learning differences	Fast pace, too much at once	Pause and replay, slower speed, transcripts, simple language
Vestibular disorders, migraines, epilepsy	Motion or flashing causes harm	No autoplay, pause buttons, reduced motion, no flashing
Everyone, sometimes	Noisy train, sleeping baby, bad connection	Captions, transcripts, small files

Planning for the first five groups improves the experience for everyone in the last.

What Each Kind of Media Needs

HTML Code

index.html

<!-- Video with speech: captions + transcript -->
<figure>
  <figcaption>How to build a signup form (8 minutes)</figcaption>
  <video controls width="640" height="360" src="lesson.mp4" poster="cover.jpg">
    <track kind="captions" src="lesson.en.vtt" srclang="en" label="English" default>
  </video>
</figure>

<details>
  <summary>Read the transcript</summary>
  <p><strong>Asha:</strong> Welcome back! Today we will build a signup form.</p>
</details>

<!-- Embedded video from another site: give the frame a title -->
<iframe
  title="Interview with a baker (video, 12 minutes)"
  src="https://player.example.com/embed/123"
  width="640" height="360"
  allowfullscreen></iframe>

Browser Output

http://127.0.0.1:5500/index.html

What kind of media is it? Audio only (a podcast or interview)Video with speech (a lesson or talk)Video with no sound (a screen recording or animation)A decorative background loop

Checklist: Video with speech (a lesson or talk)

Captions are provided with a track element, and are accurate

Captions name speakers and describe important sounds

Information shown only in the picture is also spoken, or described

Audio description or a text alternative is available if the picture carries meaning

A transcript is available

The controls work with the keyboard, with a visible focus ring

Nothing plays automatically with sound

No more than three flashes in any second

0 of 8

Tick each item you have really checked.

Use the checklist above on your own pages. Switch the kind of media and see how the requirements change.

Transcripts

A transcript is the full text of the audio, written on the page. It is the single most useful alternative, because it helps nearly everybody:

• Deaf and hard of hearing visitors, and anyone who cannot play sound.
• Blind visitors with a screen reader, if it also describes what is seen.
• Non-native speakers, who can read at their own pace, or translate it.
• Everyone who wants to search, skim, copy, or quote the content.
• Search engines, which can then index what is said.

A good transcript includes:

1. Who is speaking, at each change.
2. Everything spoken, in the order it is said.
3. Important sounds, in square brackets: "[laughter]", "[door slams]".
4. Visual information that matters, for video: "[Asha holds up a loaf of bread]".
5. Headings or timestamps for long ones, so people can find their place.

Try It: A Transcript That Follows the Sound

Play the sound, and see the transcript line highlight. Click a time to jump. Turn the highlight off, and the transcript is still plain, readable text.

HTML Code

index.html

<figure>
  <figcaption>Episode 1: A short melody</figcaption>
  <audio id="sound" src="melody.wav" controls></audio>
</figure>

<section aria-labelledby="t-title">
  <h2 id="t-title">Transcript</h2>
  <ul id="lines">
    <li><button type="button" data-time="0">0:00</button>
        <strong>Narrator:</strong> Four rising notes: C, E, G, E.</li>
    <li><button type="button" data-time="2">0:02</button>
        <strong>Narrator:</strong> A gentle wobble: D, F, A, F.</li>
  </ul>
</section>

script.js

const sound = document.getElementById("sound");
const items = document.querySelectorAll("#lines li");

document.querySelectorAll("#lines button").forEach((button) => {
  button.addEventListener("click", () => {
    sound.currentTime = Number(button.dataset.time) + 0.05;
    sound.play().catch(() => {});
  });
});

sound.addEventListener("timeupdate", () => {
  const active = Math.floor(sound.currentTime / 2);
  items.forEach((item, index) => {
    if (index === active) item.setAttribute("aria-current", "true");
    else item.removeAttribute("aria-current");
  });
});

Browser Output

http://127.0.0.1:5500/index.html

Preparing the sound…

Highlight the line that is playing

Transcript

• Narrator: Four rising notes: C, E, G, E.
• Narrator: A gentle wobble: D, F, A, F.
• Narrator: The melody climbs to a high C.
• Narrator: [the notes slow down] Coming home: G, E, D, C.

The transcript is ordinary text on the page, so it can be read without sound, searched, translated, and used with a screen reader. Each time button jumps to that line.

If the transcript is long, put it in a <details> widget, or on its own page, linked right next to the player.

Captions and Subtitles

For video with speech or meaningful sound, add captions: <track kind="captions">. They give deaf viewers the speech and the sounds. Add subtitles for other languages. The details are in Track, Captions, and Subtitles.

Audio Description

Some video carries important information only in the picture: a chart, a demonstration, an action, or on-screen text that is never spoken. Blind and low vision viewers need that information too.

Ways to provide it, from best to simplest:

1. Say it out loud. Write the narration so that the speaker describes what is happening ("I click the blue Save button in the top right"). This often needs no extra work, and helps everybody.
2. An audio description version. A second version of the video (or audio track) where a narrator describes key visuals in the pauses. Offer a link or toggle: "Watch with audio description".
3. A text alternative. A transcript that includes the visual information, for example in brackets.
4. A descriptions text track. <track kind="descriptions"> stores timed text descriptions, but browsers do not read it out for you. Your script must pass it to assistive technology (for example, by writing the active cue into an aria-live region), and support varies. Treat it as an advanced option and test carefully.

<video controls src="lesson.mp4">
  <track kind="captions" src="lesson.en.vtt" srclang="en" label="English" default>
  <track kind="descriptions" src="lesson.desc.vtt" srclang="en" label="Descriptions">
</video>

<p><a href="lesson-described.mp4">Watch with audio description (MP4, 22 MB)</a></p>

Not every video needs description. If everything on the screen is already explained in the narration, you have met the need.

Keyboard and Controls

• Use controls, or custom controls built from real button and input elements. See Media Controls.
• Every control must be reachable with Tab, and used with Enter or Space, and arrow keys on sliders.
• Make the focus ring visible, including over the video.
• Give every button a name, especially icon-only buttons.
• Keep targets large, at least 24 by 24 CSS pixels, and ideally 44.
• Never make controls disappear with no way to bring them back by keyboard.
• Do not trap the keyboard, especially with embedded players. A visitor must be able to Tab out.

Autoplay and Audio Control

• Do not autoplay audio. If sound starts on its own and lasts more than about 3 seconds, the visitor must have a way to pause or stop it, or to control its volume separately from the system volume. The simplest solution is never to autoplay with sound.
• Screen reader users hear their screen reader and the page sound at the same time. Loud, unexpected audio makes the page unusable.
• Any moving, blinking, or auto-updating content that starts by itself and lasts longer than 5 seconds needs a way to pause, stop, or hide it.
• Do not loop audio with no stop button.

Motion, Flashing, and Reduced Motion

Flashing

Content that flashes more than three times in any one second can trigger seizures in some people. Check videos and animations for strobing, rapid cuts between very bright and very dark frames, and flickering patterns. If in doubt, slow it down, or use a free tool to test it.

Reduced Motion

Many people set their device to reduce motion, because movement can cause nausea, dizziness, or distraction. Respect it:

const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const video = document.querySelector("#bg");

if (reduce) {
  video.removeAttribute("autoplay");
  video.pause();
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

Try It: Respect the Setting, Offer a Pause Button

This demo reads your device setting. If you have reduced motion turned on, the animation starts paused. Either way, you can pause or play it.

HTML Code

index.html

<video id="bg" src="waves.mp4" autoplay muted loop playsinline aria-hidden="true"></video>
<button type="button" id="toggle">Pause background video</button>

script.js

const bg = document.getElementById("bg");
const toggle = document.getElementById("toggle");
const query = window.matchMedia("(prefers-reduced-motion: reduce)");

function setPlaying(playing) {
  if (playing) bg.play(); else bg.pause();
  toggle.textContent = playing ? "Pause background video" : "Play background video";
}

if (query.matches) setPlaying(false);

toggle.addEventListener("click", () => setPlaying(bg.paused));

Browser Output

http://127.0.0.1:5500/index.html

Your system setting for reduced motion is off. Turn it on in your device's accessibility settings, and this demo will start paused.

This is a CSS animation standing in for a moving background video. The same two ideas apply: respect the setting, and always offer a pause button.

Labelling Media

• Give the player a name with a nearby heading, a figcaption, or aria-label="Interview with a baker".
• Give every embedded video frame a title: <iframe title="Interview with a baker (video, 12 minutes)">. Screen reader users often list the frames on a page, and an untitled frame is just "frame".
• Say how long it is ("8 minutes"), so people can decide whether to play it.
• Say what the format is when it is not obvious: "Video", "Audio", "Download (MP4, 22 MB)".
• Use the poster as a clear preview, but do not rely on it to describe the video.
• Keep fallback content inside the media element, with a download link.

Contrast and Text

• Captions and any on-screen text should have at least 4.5 to 1 contrast against their background.
• Do not put text over busy or bright parts of a video without a background box or shadow.
• Do not use colour alone to carry meaning in the picture ("press the green button").
• Keep text large enough to read on a phone, including text inside the picture.
• Check controls on top of the video: a white icon vanishes on a bright frame.

Which Standards Apply?

The Web Content Accessibility Guidelines (WCAG) are the usual reference. These success criteria are the ones that matter most for media:

Criterion	In plain words
1.2.1 Audio-only and video-only (prerecorded)	Give a transcript for audio-only, and a transcript or audio track for silent video
1.2.2 Captions (prerecorded)	Captions for video with sound
1.2.3 and 1.2.5 Audio description	Audio description or a text alternative for visual information
1.2.4 Captions (live)	Captions for live video
1.4.2 Audio control	Control or stop sound that plays by itself
2.2.2 Pause, stop, hide	A way to pause moving content that starts by itself
2.3.1 Three flashes	No more than three flashes in a second

Rules differ by country, sector, and the level you aim for, and the guidelines change over time. This is a guide for learning, not legal advice, so check the standards that apply to you.

Testing Your Media

1. Turn the sound off, and try to follow the page. Do captions and the transcript give you the content?
2. Close your eyes, or turn the screen off, and listen. Does the narration make sense without the picture?
3. Use only the keyboard. Can you reach, start, pause, seek, and leave the player?
4. Use a screen reader. Is the player named? Are the controls labelled? Is the transcript easy to find?
5. Turn on reduced motion in your system settings. Does anything still move by itself?
6. Zoom to 200%, and check the layout on a phone.
7. Check the contrast of captions and controls.
8. Try a slow connection. Does the page still work before the media loads?
9. Ask real users, including disabled people, wherever you can.

Security and Privacy Notes

• Transcripts and captions are public text. Do not include private remarks or confidential details, even in comments.
• Text alternatives expose what the media holds. If the video is private, protect the transcript on the server as well.
• Embedded players can track viewers, including people who never press play. Use privacy-friendly embed modes, load them only after a click, and ask for consent where the law requires.
• Treat any user-supplied text (a comment, a title, a caption) as text. Use textContent, not innerHTML.
• Auto-captioning and transcription services may store your audio. Check the terms before uploading private recordings.
• Accessibility data is sensitive. Do not record or publish which viewers turned on captions, or other settings that could reveal a disability, without clear consent.

Global Audience Notes

• Provide captions in the language of the audio, and subtitles in the languages your visitors need.
• Offer transcripts in more than one language if you can. They are easy to translate, and help search.
• Write plainly. Short sentences, familiar words, and few idioms are easier to caption, translate, and understand.
• Do not rely on sound or colour alone, because conventions differ across cultures.
• Plan for slow and expensive connections. A transcript loads in a moment, and may be the only part some visitors can use. Compress media and use preload="metadata".
• Test right-to-left and non-Latin languages for captions, transcripts, and control layouts.
• Be careful with accents and speech speed. Offer slower playback, and clear captions for language learners.

Common Mistakes to Avoid

1. No captions on video with speech.
2. Auto-generated captions published without review.
3. No transcript for audio.
4. Information shown only in the picture, and never spoken or described.
5. Autoplaying media with sound.
6. Moving backgrounds with no pause button, and ignoring reduced motion.
7. Flashing or strobing content.
8. Controls built from div elements, or hidden from the keyboard.
9. Icon-only buttons with no name.
10. An iframe with no title.
11. Relying on kind="descriptions" alone, expecting browsers to read it aloud.
12. Never testing with the sound off, the keyboard, or a screen reader.

Practice Time

Try these on a page of your own, or on a small test page:

1. Watch a video with the sound off. List everything you could not understand.
2. Add captions with kind="captions", and review them line by line.
3. Write a transcript with speaker names, and put it in a details widget.
4. Make the transcript clickable, so each line jumps to its time in the audio.
5. Find one thing in a video that is shown but never spoken, and add it to the narration or the transcript.
6. Add an iframe with a clear title, and listen to how a screen reader announces it.
7. Use the Tab key to play, pause, seek, and leave the player.
8. Add a pause button to a moving background, and respect prefers-reduced-motion.
9. Test your captions' contrast over a bright frame.
10. Bonus: run the checklist above for each type of media on your site, and fix three items.

Quick Recap

Click a question to check your answer.

1. Which alternatives help people who cannot hear audio?

Captions for video, and transcripts for audio and video. Both should name speakers and describe meaningful sounds.

2. What is audio description for?

It tells blind and low vision viewers what is shown but not spoken. You can write narration that says it, provide a described version, or add a text alternative.

3. When must media have a pause or stop control?

Whenever sound plays by itself for more than about 3 seconds, or moving content starts by itself and lasts more than 5 seconds. The simplest approach is not to autoplay.

4. How do you respect people who prefer reduced motion?

Check prefers-reduced-motion in CSS and JavaScript, and start animations and background video paused. Still provide a button to play them.

5. Why give an embedded video frame a title?

Screen reader users navigate by frames, and an iframe with no title is announced with no useful name. A short title says what it holds and how long it is.

6. Does kind="descriptions" make browsers read descriptions aloud?

No. Browsers do not voice description tracks for you. Your script must send the text to assistive technology, so most sites offer a described version or a text alternative instead.

Key Takeaways

• Accessible media means captions, transcripts, audio description or a text alternative, usable controls, and safe motion.
• Captions are for deaf viewers, transcripts help almost everyone, and description covers what is only visible.
• Do not autoplay sound. Give any automatic motion a pause button, and respect prefers-reduced-motion.
• Avoid flashing more than three times in a second.
• Controls must work by keyboard, with names, focus rings, and large targets.
• Label players and embedded frames, and say how long the media is.
• Test with the sound off, the screen off, the keyboard, a screen reader, and reduced motion.
• Plan for many languages, slow connections, and privacy.

Next, learn how to make video fit every screen in Responsive Video, or return to the Audio and Video overview.