Accessible images and media

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.

How browsers actually behave

For img, the browser exposes the alt value through the accessibility tree. An empty value intentionally marks an image as decorative; an omitted value can cause assistive technology to announce a filename or URL. The browser does not know whether a photograph is decorative, functional, or informative. That decision depends on the surrounding content and belongs to the author.

The video and audio elements supply native playback controls when controls is present. The exact control layout and keyboard behavior vary by browser and operating system. A track element can associate WebVTT captions with video, but authors still need to check timing, speaker identification, sound cues, and language. A fallback paragraph inside video helps when the element is unsupported; it is not a substitute for an adjacent transcript link in modern browsers.

Decisions and trade-offs

Write short alternative text when a short replacement performs the same job as the image. For a chart, map, or diagram, use a concise alt value to identify the subject and provide the full data or explanation nearby. Repeating a long caption word for word in alt makes screen-reader output needlessly redundant.

Captions are synchronized with video; transcripts are read at the person's own pace and are easier to search or quote. Many recordings need both. Audio description is separate: it explains visual information that dialogue and ordinary sound do not convey. Do not describe every visual detail if it does not affect the meaning or task.

Accessibility consequences

Autoplaying sound competes with screen-reader speech and can make controls hard to locate. Motion may also trigger vestibular symptoms. Start media paused, provide ordinary controls, honor reduced-motion preferences for decorative animation, and avoid custom players unless the native control set cannot meet a documented requirement.

Text alternatives must stay accurate when the media changes. A product image, status icon, or tutorial screenshot can become misleading even though its file still loads. Review the visible asset and its alternative together.

Common failures and fixes

• A screen reader announces a hash-like filename. The meaningful image has no alt. Write a contextual replacement rather than copying the filename.
• Decorative flourishes create noise. They have descriptive alternatives. Use alt="" when nearby text already carries the full meaning.
• Captions omit music or alarms. The file transcribes speech only. Include non-speech audio needed to understand the scene.
• The player works with a mouse only. A custom control lost native keyboard behavior. Restore native controls or implement and test the complete control contract.
• The layout jumps while images load. Intrinsic dimensions are missing. Set truthful width and height, then let CSS scale responsively.

Verify it

Disable images and read the page. Every task and claim should remain understandable. Inspect the accessibility tree for image names, then run a screen-reader pass to catch repetition that an automated rule cannot judge. Play captions at normal and faster speeds and compare them with the recording. Use only the keyboard to play, pause, seek, change volume, enable captions, and leave the player. At 320 CSS pixels, confirm the player and transcript link fit without page-level horizontal scrolling.

Exercise and next step

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. Next, apply the same purpose-based review to responsive image choices in the HTML images lesson.

Repeat the review with a slow network and an empty cache. The fallback text, poster, controls, captions, and transcript must become useful in a sensible order rather than appearing only after the media finishes. This catches delivery failures that an accessibility-tree inspection on a fast connection can miss.