An image without a text alternative is invisible to a screen-reader user. A video without captions is unusable in a noisy room, on a train, or for a deaf viewer. Both are content problems, not edge cases.
Learning objectives
- Write alt text that serves the image's purpose.
- Mark decorative images correctly.
- Handle functional and complex images.
- Add captions, transcripts and accessible media controls.
1. The alt decision tree
Ask: why is this image here?
Decorative — it adds no information (background, divider, decorative icon next to a label). Use empty alt so it is skipped:
<img src="/pattern.svg" alt="" />
Informative — it conveys content. Describe the content, not the file:
<!-- wrong -->
<img src="campus.jpg" alt="image of campus" />
<!-- right -->
<img src="campus.jpg" alt="Aivasu campus reception on the second floor, with course banners behind the desk" />
Functional — it is the only content of a link or button. Describe the action, not the picture:
<a href="/cart">
<img src="cart.svg" alt="View cart" />
</a>
Complex — a chart, diagram or screenshot with data. Give a short alt and a longer description nearby:
<figure>
<img src="placements.png" alt="Placement rate by course, 2025" />
<figcaption>
2025 placement rate: Full Stack 92%, Data Science 88%, Cloud 81%.
</figcaption>
</figure>
Text in an image — avoid it. If it must exist, repeat the text in alt.
2. Alt text rules
- Be specific and concise (roughly 125 characters for a simple image).
- Do not start with "Image of" or "Picture of" — screen readers already say "image".
- Do not repeat the caption word for word; the caption is for everyone, alt is the replacement.
- Include relevant text visible in the image.
- End with a period so the screen reader pauses.
3. SVG and icons
<!-- meaningful icon -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Certificate</title>
...
</svg>
<!-- decorative icon next to visible text -->
<svg aria-hidden="true" focusable="false">...</svg>
Lucide and most icon libraries accept aria-hidden="true". An icon-only button still needs a label on the button:
<button type="button" aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>
4. Video
<video controls preload="metadata" poster="poster.jpg">
<source src="lesson.mp4" type="video/mp4" />
<track kind="captions" src="lesson-en.vtt" srclang="en" label="English" default />
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters" />
</video>
- Captions for dialogue and meaningful sounds. Auto-generated captions must be reviewed — they are wrong often enough to mislead.
- Transcript below the video for people who prefer reading or cannot use audio.
- Audio description for visual information that is not spoken (a demonstrated step, an on-screen error).
- Never autoplay with sound. If it autoplays muted, provide a visible pause control.
controlsis mandatory; custom controls must be keyboard accessible and labelled.
5. Audio
<audio controls src="podcast.mp3"></audio>
<p><a href="podcast-transcript.html">Read the transcript</a></p>
A transcript is the audio equivalent of alt text. It also makes the content indexable.
6. Motion and flashing
- Avoid content that flashes more than three times per second.
- Respect reduced motion:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
- Pause, stop and hide controls for anything that moves for more than five seconds.
7. Colour is not information
<!-- wrong: only colour distinguishes status -->
<span class="dot green"></span>
<!-- right -->
<span class="dot green" aria-hidden="true"></span>
<span>Available</span>
Errors, statuses and required fields need text or an icon with a label, not just red or green.
Common mistakes
alt="image",alt="photo", or the filename.- Duplicating the caption in alt.
- Missing alt on logos that are the only content of a home link.
- Captions that are auto-generated and never reviewed.
- Autoplaying video with sound.
- An icon-only button whose SVG has a
<title>but the button has no accessible name (the label must be on the control).
Practice
Fix the gallery and media page in the assignment. Every image gets a decision, every video gets captions or a transcript.