Images, Media, Color & Motion

Make images, video, color, and animation usable for everyone. Write meaningful alt text, caption video, hit contrast ratios, and respect reduced-motion preferences.

altcaptionscontrastreduced motion

Duration

⏱ About 1.5 hours

Level

📊 Intermediate

Prerequisite

🎯 a11y-01

OUTCOME

Pages that pass automated contrast checks and respect user motion preferences

What you'll learn

1Write alt text that conveys meaning, not just description
2Add captions and transcripts to video
3Meet WCAG AA contrast (4.5:1 for normal text)
4Respect prefers-reduced-motion

1. Alt Text That Helps

html

<!-- Informative image -->
<img src="chart.png" alt="Revenue grew from $1M in Q1 to $1.8M in Q3 2024">

<!-- Decorative — use empty alt to skip in screen readers -->
<img src="border.svg" alt="" aria-hidden="true">

<!-- Image is the link content -->
<a href="/profile"><img src="alice.jpg" alt="Alice — go to profile"></a>

2. Video & Audio

html

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo.en.vtt" srclang="en" label="English">
</video>

<details><summary>Transcript</summary>
  <p>[00:00] Welcome to the demo...</p>
</details>

Captions for hearing impaired
Audio descriptions for blind users
Transcripts help everyone (and SEO)

3. Color Contrast

Text size	WCAG AA minimum
Normal text	4.5:1
Large text (18pt+ / 14pt+ bold)	3:1
UI components & graphics	3:1

💡

Never convey information by color alone. Use icons or text labels too.

4. Reduced Motion

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Some users get nauseous from heavy animation. Respect their OS-level preference.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗