By the end of this lesson you can
- Write useful alt text for images, icons and charts.
- Decide when images are decorative.
- Provide captions, transcripts and audio description for media.
The idea
Alt text
Alternative text describes an image for people who cannot see it. It should convey the image's purpose in context, not every visual detail.
- Informative images: describe the information. "Bar chart: sales rose from £2m in 2023 to £3.5m in 2025."
- Functional images (images that are links or buttons): describe the action. "Search", not "magnifying glass".
- Decorative images: mark them so screen readers skip them (empty alt).
- Complex images such as detailed charts: give a short alt plus a longer description or data table nearby.
- Do not start with "Image of". Screen readers already announce it is an image.
- Avoid text in images; if unavoidable, include the text in the alt.
Media
- Captions: synchronised text of speech and important sounds, for deaf and hard of hearing people (and anyone watching without sound).
- Transcripts: full text of audio and video content, useful for deafblind people and for skimming.
- Audio description: narration of important visual information, for blind people.
Auto-generated captions are a starting point but must be checked and corrected.
Why it matters in real projects
Images and video carry meaning that blind, deaf and deafblind people otherwise miss. Good alt text and captions make content usable for them, and also help people on slow connections, in noisy or silent places, and search engines. Designers often decide which images are meaningful and what they communicate, so they are well placed to write alt text.
A realistic example
An online shop's product images all have alt text "product image". A blind customer cannot tell the difference between colour options. A promotional video has no captions, so deaf customers miss the discount code that is only spoken.
The team rewrites alt text as "Navy wool coat, knee length, front view" and so on, adds corrected captions, and shows the discount code on screen and in the video description. Customer service sees fewer accessibility complaints.
Step by step
Inventory images
List every image on a page.
Classify
Mark each as informative, functional, decorative or complex.
Write alt text
Describe purpose in context.
Handle complex images
Add longer descriptions or data tables.
Check media
Ensure captions, transcripts and audio description where needed.
Review with a screen reader
Listen to the page and check it makes sense.
Common mistakes
Mistake Alt text like "image" or file names.
Instead Describe purpose.
Mistake Describing decorative images.
Instead Mark them decorative.
Mistake Uncorrected auto-captions.
Instead Review and correct captions.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
Alt text practice
Write alt text for a page of images.
Steps
- Choose a news article or product page.
- Classify each image.
- Write alt text for each.
- Compare with the existing alt text using browser tools.
Deliverable
An image table with classifications and alt text.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Alt text conveys an image's purpose in context.
- Decorative images are skipped.
- Complex images need longer descriptions.
- Media needs captions, transcripts and audio description.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.