Alternative text
A screen reader cannot see a picture. It reads the words you put in the alt attribute instead.
Good alt text gives the same meaning in words. Missing alt text can turn a photo into a file name.
In one minute
- Every
<img>needs analtattribute. No exceptions. - Informative image: alt says what it means here. Decorative image:
alt=""so it is skipped. - Image in a link or button: alt says the action or destination, not the look.
- Charts need a short alt plus a longer description nearby. Context decides the words.
Imagine reading a page to a friend over the phone. When you reach a picture, what would you say?
That is the alt text. If the picture is just decoration, you would say nothing, and that is alt="".
alt is short for "alternative": words used instead of the image.
1. Missing, empty, or good alt
A food-delivery app shows a photo of a dish. Here are three versions of the same image tag. Listen to each, then make the image "fail to load".
Step 1. Choose the alt. Step 2. Toggle the image loading.
Dal makhani · ₹220 (above: a simulated photo of a bowl of dal makhani)
Alt text does three jobs. Screen readers read it. Browsers show it when the image fails. Search engines use it to understand the image. This is WCAG 1.1.1, Non-text Content (level A).
Why is "No alt at all" worse than alt="" for a decoration? (Answer: with no alt, many screen readers read the file name.)
2. Decide: informative, decorative, or functional?
Before writing words, decide what job the image does. An informative image adds facts. A decorative image adds only looks. A functional image is a link or button, so it does something.
Lab: the alt decision helper. Think of any image. Answer each question to get a recommended alt.
Your answers so far
Run the helper for the shop logo at the top of a bookshop site that links to the home page. What alt did you get?
3. Functional images and the "image of" habit
When an image is the only content of a link or button, its alt becomes the control's name. Say what happens, not what it looks like.
Describes the look
Bad<button> <img src="glass.png" alt="Magnifying glass icon"> </button>
Says the action
Fixed<button> <img src="glass.png" alt="Search books"> </button>
Do not start alt with "image of" or "picture of". The screen reader already says "image" or "graphic". You would hear it twice. Say "photo" or "drawing" only when the kind of picture matters, like on an art page.
A cart icon link that goes to the basket. Better alt: "Shopping cart icon" or "Basket"? (Answer: "Basket".)
4. Images of text, and complex images
An image of text is a picture of words, like a "50% OFF" banner. It cannot be resized, recoloured or translated well. Use real text styled with CSS when you can (WCAG 1.4.5, Images of Text). If you must use the image, the alt repeats the words.
A complex image, like a chart, holds too much for a short alt. Give a short alt that names it. Put the full details in text nearby.
A <figure> with a <figcaption> keeps the image and its description together.
<figure> <img src="sales.png" alt="Bar chart: books sold per month, January to April. Details below."> <figcaption>January 300, February 400, March 200, April 550 ...</figcaption> </figure>
For bigger charts, a data table under the chart works even better. Everyone benefits, not just screen reader users.
Your school's exam timetable is posted as one image. What is the best fix? (Answer: publish it as a real HTML table.)
5. SVG icons and background images
An SVG is an image made of code that you can paste straight into HTML. It has no alt attribute, so there are two patterns.
- Icon next to visible text: hide the icon with
aria-hidden="true". The text already names the control. - SVG that stands alone and means something: add
role="img"andaria-label="…". A<title>inside the SVG also works in most screen readers, butaria-labelis usually more reliable.
Icon + text
Good<button> <svg aria-hidden="true" focusable="false">…</svg> Save to wishlist </button>
SVG on its own
Good<svg role="img" aria-label="Rated 4 out of 5"> …five star shapes… </svg>
A background image set with CSS (background-image) has no alt at all. Screen readers do not know it exists.
Use it only for decoration. If the picture carries meaning, use an <img> with alt, or say the meaning in real text.
A "Sold out" stamp on a book is drawn as a CSS background image. Who misses that fact? How would you fix it?
6. Context decides the words
The same photo can need different alt text on different pages. Ask: why is this image here, on this page?
Step 1. Choose a page. See how the alt for one masala dosa photo changes.
7. Practice: write the alt
Each card describes an image and where it sits. Write the alt text, or mark the image as decorative. Then press "Check". The checker tests common rules. It cannot judge meaning the way a person can.
Step 1. Read the scene. Step 2. Write the alt. Step 3. Check it.
In card 1, type IMG_2041.jpg and check. Then type "Image of a trophy". What does the checker say each time?
Common mistakes
| You see | Why it is a problem | Fix |
|---|---|---|
<img> with no alt | Many screen readers read the file name. | Always add alt, even if empty. |
alt="image" or "image of…" | Says "image" twice and nothing useful. | Describe the meaning. |
| Alt on a decoration | Noise that slows people down. | alt="" |
| Icon link with alt describing the icon | The user does not learn where it goes. | Alt = action or destination. |
| Chart with only "chart" as alt | The data is lost. | Short alt + full description or table nearby. |
| Meaning in a CSS background image | Invisible to screen readers. | Use <img alt> or real text. |
Remember
- Every
<img>gets analt. Decorative ones getalt="". - Write what the image means here, not every detail. Skip "image of".
- In a link or button, alt names the action or destination.
- Images of text: repeat the words. Charts: short alt plus a full description nearby.
- SVG icons:
aria-hiddennext to text, orrole="img"+aria-labelalone. - Never hide meaning in a CSS background image.