Lesson · Beginner
Accessible images and media
Choose text alternatives, captions, transcripts, and controls based on what an image or recording contributes to the page.
- Author
- Editorial team
- Reviewer
- Publication review pending
- Review tier
- 180-day
Match the alternative to the information
Alternative text replaces an image’s contribution in its context. A short label
can replace a functional icon; a chart may need a concise alt value plus a
nearby data table or explanation.
Recorded media has several channels
Captions represent speech and meaningful sounds in synchronized video. Transcripts provide a readable text version. Audio description supplies visual information that the existing soundtrack does not communicate. The right combination depends on the media and its purpose.
<video controls preload="metadata">
<source src="lesson.mp4" type="video/mp4" />
<track kind="captions" src="lesson-en.vtt" srclang="en" label="English" />
<p><a href="lesson-transcript.html">Read the transcript</a>.</p>
</video>Do not autoplay sound. Native controls are a useful baseline, but test their keyboard and screen-reader behavior in the browsers you support.
Exercise
Inventory every meaningful image and recording on one page. Write down the information each contributes, then confirm an equivalent is available without seeing or hearing it.