Media Project

title: "Media Project — Build a Complete Accessible Media Page" description: "Build a production-ready media page with accessible video player, captions, audio descriptions, transcripts, and keyboard controls." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, media]

Apply everything you learned by building a complete accessible media page with video, captions, descriptions, transcript, and keyboard support.

## What You'll Learn

How to combine all media accessibility patterns into a single production-ready page.

## Why It Matters

A complete media page demonstrates how all alternatives work together: captions for deaf users, audio descriptions for blind users, and transcripts for everyone.

## Real-World Use

A DodaTech tutorial page has a video player with captions, audio descriptions, an interactive transcript, and keyboard controls. All users can access the content in their preferred format.

## Complete Media Page

```html
<article>
  <h1>How to Build Accessible Forms</h1>

  <div class="video-container">
    <video id="tutorial" controls
           aria-label="Tutorial: Building Accessible Forms"
           preload="metadata"
           poster="tutorial-poster.jpg">
      <source src="tutorial.mp4" type="video/mp4">
      <source src="tutorial.webm" type="video/webm">
      <track kind="captions" src="captions-en.vtt"
             srclang="en" label="English captions" default>
      <track kind="descriptions" src="descriptions-en.vtt"
             srclang="en" label="English audio descriptions">
      <p>Your browser does not support video.
         <a href="tutorial.mp4">Download the video</a>.</p>
    </video>
  </div>

  <section aria-labelledby="transcript-heading">
    <h2 id="transcript-heading">Transcript</h2>
    <div class="transcript">
      <p><a href="#t=0" data-time="0">0:00</a> Welcome to this tutorial on accessible forms.</p>
      <p><a href="#t=5" data-time="5">0:05</a> In this video, we will cover labeling, validation, and error messages.</p>
      <p><em>[Presenter opens a code editor on screen]</em></p>
      <p><a href="#t=12" data-time="12">0:12</a> First, let us look at how to associate labels with form controls.</p>
    </div>
  </section>
</article>

CSS

.video-container {
  max-width: 800px;
  margin-bottom: 2rem;
}

.video-container video {
  width: 100%;
  height: auto;
}

.transcript p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.transcript a {
  color: #0066cc;
  text-decoration: none;
}

.transcript a:hover {
  text-decoration: underline;
}

JavaScript

// Interactive transcript seeking
document.querySelectorAll('[data-time]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const time = parseFloat(this.dataset.time);
    const video = document.getElementById('tutorial');
    video.currentTime = time;
    video.play();
  });
});

// Pause when not visible
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      document.getElementById('tutorial').pause();
    }
  });
});
observer.observe(document.querySelector('.video-container'));

Common Mistakes

1. Missing fallback for unsupported formats

Provide multiple source formats (MP4, WebM) and a download link as fallback.

2. Transcript not synced with video

Interactive transcripts with timestamps let users click to seek.

3. No poster image

A poster image helps users understand the video content before playing.

4. Video not responsive

Set width: 100% and height: auto on video elements for responsive behavior.

5. No download option

Users with slow connections may prefer to download the video.

Practice Questions

1. What three alternatives should a complete media page include? Captions, audio descriptions, and a transcript.

2. Why is a poster image important? It gives users a preview of the video content before they press play.

3. How do you make a transcript interactive? Add timestamps as links that call video.currentTime = time when clicked.

Challenge: Extend the media page to include a chapter navigation list and a download section with links to video, captions, and transcript files.

FAQ

Mini Project

Build a complete accessible video tutorial page with captions, descriptions, interactive transcript, chapter markers, and a download section. Test all features.

What's Next

Now explore Accessible SVGs and Charts to learn how to make data visualizations accessible.