Media Accessibility & Best Practices

Adding media to a page is not just about the element — it is about making sure every user can access it. This lesson consolidates the accessibility rules for images, audio, video, and iframes.

Images: alt text review

You covered alt on <img> in Module 02. The rule still holds when images appear alongside other media.

<img src="images/trail-map.jpg" alt="Topographic map of the Pine Ridge trail loop">

• Describe what the image shows, not that it is an image (“a photo of” is redundant)
• If the image is decorative and adds no information, use an empty alt="" — the screen reader skips it
• Never leave alt out entirely — it causes the screen reader to announce the filename

Audio and video: always include controls

Without controls, a media element exists in the page but has no interface. The user cannot start, stop, or adjust volume. There is no way to interact with it.

<!-- Bad — the audio plays nowhere, does nothing visible -->
<audio src="sounds/birdsong.mp3"></audio>

<!-- Good — user has play/pause/volume controls -->
<audio src="sounds/birdsong.mp3" controls></audio>

controls is required unless you are building a custom player with JavaScript. At this stage, always include it.

Never autoplay audio or video

autoplay starts media the moment the page loads, without the user asking for it. It is harmful in several ways:

• Surprises or startles users, especially on a shared device
• Interferes with screen readers that are speaking page content
• Consumes data without consent

<!-- Never do this -->
<video src="intro.mp4" autoplay></video>

If a user needs to watch or hear something, provide controls and let them choose when to start.

Fallback text

Fallback text inside <audio> and <video> appears only when the browser cannot render the element at all — an extremely old browser, or a non-visual environment. It is not a caption.

<audio src="sounds/birdsong.mp3" controls>
  Your browser does not support the audio element.
</audio>

Keep fallback text short and factual. It is a last resort, not a description.

Captions and transcripts

controls makes media operable. Captions and transcripts make audio content accessible.

A caption (closed caption, <track> element) provides synchronized text during video playback — it is used by deaf and hard-of-hearing users and by anyone watching without sound.

A transcript is a plain-text version of the audio content, linked separately.

Both are important for a fully accessible page. Adding <track> for captions is an intermediate topic, but you should know these exist and matter. For now, if your page has significant audio or video content, note in your page text that a transcript is available.

iframes: title is required

An <iframe> without a title is announced as “frame” by screen readers — no context about what is inside.

<!-- Bad -->
<iframe src="https://maps.google.com/..." width="600" height="450"></iframe>

<!-- Good -->
<iframe src="https://maps.google.com/..." width="600" height="450" title="Map showing our office on Main Street"></iframe>

Write a title that describes the specific content of this particular iframe.

A checklist for media elements

Before adding any media element to a page, run through this list:

Element	Requirement
<img>	alt attribute with descriptive text (or alt="" if decorative)
<audio>	controls present; no autoplay; fallback text inside element
<video>	controls present; no autoplay; width and height set; fallback text inside element
<iframe>	title attribute describing the specific content

Exercise

Open index.html in VS Code.

Review every media element you have added across Lessons 01 and 02 of this module:

1. Find your <audio> element. Confirm it has controls and fallback text inside. Add them if missing.
2. Find your <iframe> element. Confirm it has a title that describes the content. Update it if it is vague.
3. Scan your existing <img> elements (from earlier modules). Confirm every one has an alt attribute with meaningful text.

There is no new HTML to add in this exercise — it is a review and correction pass. Accessibility work often looks like this: you revisit what you built and make it right.

After your review, index.html should pass this standard:

• No <img> missing alt
• No <audio> or <video> without controls
• No <iframe> without a descriptive title
• No autoplay anywhere

Recap

• Every <img> needs alt. Decorative images get alt="".
• <audio> and <video> must have controls. Never use autoplay.
• Fallback text inside <audio> and <video> is shown only when the browser cannot render the element.
• <iframe> requires a title attribute describing the specific embedded content.
• Captions and transcripts are the next step for audio/video accessibility — important to know they exist.