Unit 2 · HTML: structure and meaning
How to write alt text (it’s not the file name)
Alt text is what you would say about the image to someone on the phone who cannot see it: “Our bakery counter with fresh loaves”, not IMG_2041.jpg.
The mix-up
What people often think
“Alt text is the image file name.”
What the tutor says
Alt text is what you would say to someone on the phone who cannot see the image: "Our bakery counter with fresh loaves".
How it works
Screen readers read the alt text in place of the image, and browsers show it when the image fails to load. A file name tells the listener nothing.
Describe what the image adds to the page in a short phrase. Skip “image of”, because the screen reader already says it is an image. A purely decorative image gets an empty alt="" so it is skipped.
Side by side
<img src="IMG_2041.jpg" alt="IMG_2041.jpg"><img src="counter.jpg" alt="Our bakery counter with fresh loaves">Practise it with a tutor watching
Links, images and forms
Build a contact form that works for everyone, including people who cannot see it.
Free with an account. The first two units need no account.