HTML Media Accessibility

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.

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.

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.

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>

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.

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>

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

Choose the option that lists all and only the correct statements.

1. Including transcripts for audio and video
2. Using ARIA roles for custom media controls
3. Hiding captions to reduce clutter
4. Providing keyboard navigation support

For the definitions of supported roles, see the WAI-ARIA region documentation.

Choose the option that lists all and only the correct statements.

1. controls
2. aria-label
3. autoplay
4. tabindex

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