Accessibility in HTML Media
Captions, Alt Text, Transcripts & ARIA Roles

Making HTML Media Accessible: Because Everyone Deserves to Experience It

Accessibility isn’t an afterthought — it’s a core part of good design. When you include videos, audio, or other media in HTML, you must make sure all users can understand and enjoy it. From captions to transcripts to ARIA roles, this tutorial walks you through making your multimedia content inclusive and compliant.

1. Captioning with the <track> Tag

The <track> element is essential for providing captions and subtitles for videos. Captions help users who are deaf or hard of hearing understand spoken content and sound effects.

Example: Adding English Captions

<video controls width="480">
  <source src="apple-tour.mp4" type="video/mp4">
  <track src="apple-captions.vtt" kind="captions" srclang="en" label="English" default>
</video>

Use kind="captions" for spoken content. If the .vtt file has sound effect descriptions too, it’s more complete for accessibility.

2. Alt Text for Media Context

While the <audio> and <video> tags don’t directly support alt attributes, it’s still important to describe them nearby using semantic HTML. For visual media like images, alt text is critical.

Example: Contextual Description

<figure>
  <video controls src="banana-growth.mp4"></video>
  <figcaption>A time-lapse video showing banana trees growing from seed to fruit.</figcaption>
</figure>

The <figcaption> acts like alt text by describing the media’s purpose and content.

3. Providing Transcripts

Transcripts are text versions of audio or video content. They’re incredibly useful for users who:

• Are deaf or hard of hearing
• Have limited data or slow connections
• Prefer reading over listening
• Use screen readers

Example: Linking a Transcript

<audio controls src="cherry-facts.mp3"></audio>
<p><a href="cherry-transcript.html">Read transcript of the audio</a></p>

Or embed it directly:

<details>
  <summary>Transcript: Cherry Fun Facts</summary>
  <p>Did you know cherries contain melatonin, which helps with sleep?</p>
</details>

4. ARIA Roles and Labels for Custom Media Players

If you use custom JavaScript-based media players (not native HTML5 controls), ARIA roles help describe those components for assistive tech.

Example: Basic ARIA Roles

<div role="region" aria-label="Banana Video Player">
  <video controls src="banana-sound.mp4"></video>
</div>

• role="region" declares a landmark region
• aria-label gives it a descriptive name for screen readers

For full accessibility in custom players, also include aria-pressed, aria-hidden, aria-live, and aria-describedby where applicable.

5. Avoid Autoplay Without Controls

Autoplaying audio or video can be jarring or inaccessible. Always provide controls and avoid autoplay unless it’s muted or explicitly user-triggered.

<video autoplay muted loop controls src="fruit-loop.mp4"></video>

Summary

Accessible HTML media is about thoughtful inclusion — anticipating the needs of every viewer and listener. You’ve learned how to:

• Use <track> for captions and subtitles
• Describe video content with <figcaption> or nearby text
• Provide full transcripts for audio and video
• Apply ARIA roles when building custom players

What’s Next?

In our next tutorial, we’ll dive into HTML Canvas — the foundation for dynamic drawing, charts, games, and visual magic on the web.