HTML Accessibility in Media

Why Accessibility Matters

🔹 Image Alt Text - The Foundation

Alt text is the most important accessibility feature for images:

<img src="dog.jpg"> <!-- No alt text -->
<img src="dog.jpg" alt="image"> <!-- Too generic -->
<img src="dog.jpg" alt="dog.jpg"> <!-- Just filename -->

<img src="dog.jpg" alt="Golden retriever sitting in park">
<img src="chart.jpg" alt="Sales increased 25% from 2022 to 2023">
<img src="logo.jpg" alt="Acme Company">
<img src="decoration.jpg" alt=""> <!-- Decorative image -->

🔹 Alt Text Guidelines

🔹 Different Types of Images

🔸 Informative Images

<img src="weather-icon.png" alt="Sunny, 75°F">
<img src="warning.png" alt="Warning: System maintenance in progress">

🔸 Functional Images (Buttons/Links)

<a href="home.html">
    <img src="home-icon.png" alt="Home">
</a>

<button>
    <img src="search-icon.png" alt="Search">
</button>

🔸 Complex Images (Charts/Graphs)

<img src="sales-chart.png" 
     alt="Sales chart showing 20% increase from Q1 to Q2">
<p>Detailed description: Sales rose from $100k in Q1 to $120k in Q2...</p>

🔸 Decorative Images

<img src="decorative-border.png" alt="">
<img src="background-pattern.png" alt="" role="presentation">

🔹 Video Accessibility

Making videos accessible with captions and descriptions:

🔸 Captions (Subtitles)

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="captions" 
           src="captions-en.vtt" 
           srclang="en" 
           label="English Captions" 
           default>
    <track kind="captions" 
           src="captions-es.vtt" 
           srclang="es" 
           label="Spanish Captions">
</video>

🔸 Audio Descriptions

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="descriptions" 
           src="audio-descriptions.vtt" 
           srclang="en" 
           label="Audio Descriptions">
</video>

🔹 Creating VTT Caption Files

WebVTT format for captions and subtitles:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial video.

00:00:03.000 --> 00:00:06.000
Today we'll learn about web accessibility.

00:00:06.000 --> 00:00:10.000
[Background music playing]

00:00:10.000 --> 00:00:15.000
First, let's talk about alt text for images.

🔹 Audio Accessibility

Making audio content accessible with transcripts:

🔸 Audio with Transcript

<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<details>
    <summary>Transcript</summary>
    <p>Welcome to our podcast. Today we're discussing...</p>
</details>

🔹 ARIA Labels and Roles

Enhancing media accessibility with ARIA attributes:

🔸 Image with Extended Description

<img src="complex-chart.png" 
     alt="Quarterly sales data" 
     aria-describedby="chart-description">

<div id="chart-description">
    <p>Detailed breakdown: Q1 sales were $50k, Q2 increased to $75k, 
       Q3 reached $90k, and Q4 peaked at $120k, showing consistent growth.</p>
</div>

🔸 Interactive Media Player

<div role="application" aria-label="Video player">
    <video id="player" aria-describedby="video-description">
        <source src="tutorial.mp4" type="video/mp4">
    </video>
    
    <div class="controls" role="toolbar" aria-label="Video controls">
        <button aria-label="Play video" aria-pressed="false">▶️</button>
        <button aria-label="Mute audio" aria-pressed="false">🔊</button>
    </div>
</div>

🔹 Complete Accessible Example

A fully accessible video player with all features:

<section aria-labelledby="video-title">
    <h2 id="video-title">Tutorial: Web Accessibility Basics</h2>
    
    <video controls 
           poster="video-thumbnail.jpg"
           aria-describedby="video-description">
        <source src="tutorial.mp4" type="video/mp4">
        <source src="tutorial.webm" type="video/webm">
        
        <!-- Captions in multiple languages -->
        <track kind="captions" 
               src="captions-en.vtt" 
               srclang="en" 
               label="English" 
               default>
        <track kind="captions" 
               src="captions-es.vtt" 
               srclang="es" 
               label="Español">
        
        <!-- Audio descriptions -->
        <track kind="descriptions" 
               src="descriptions.vtt" 
               srclang="en" 
               label="Audio Descriptions">
        
        <!-- Fallback for browsers without video support -->
        <p>Your browser doesn't support HTML video. 
           <a href="tutorial.mp4">Download the video</a> instead.</p>
    </video>
    
    <div id="video-description">
        <p>This 10-minute tutorial covers the fundamentals of web accessibility, 
           including proper heading structure, alt text, and keyboard navigation.</p>
    </div>
    
    <!-- Transcript -->
    <details>
        <summary>Full Transcript</summary>
        <div>
            <h3>Video Transcript</h3>
            <p><strong>[00:00]</strong> Welcome to our web accessibility tutorial...</p>
            <p><strong>[00:15]</strong> First, let's discuss why accessibility matters...</p>
        </div>
    </details>
</section>

🔹 Accessibility Checklist

🔹 Testing Your Accessibility