Module 8: Accessibility · Lesson 1 of 7
How to Write Good Alt Text for Images (With Examples)
All lessons in Module 8
Goal: Write alt text that says what an image means, and know when to leave it empty.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
A screen reader reads a page aloud for people who cannot see it. At each image it reads the alt text. Good alt text answers one question: what would I say about this image if I read the page to a friend over the phone?
- Describe what the picture shows.
alt="dog.svg"helps nobody, whilealt="Rex, a brown dog, waiting by the door"does. - Drop "image of". Screen readers already announce "image".
- A logo's alt is the name:
alt="Happy Paws Shelter". - Pure decoration gets
alt="", which tells screen readers to skip it.
Never leave alt out completely, or many screen readers read the file name aloud. The history of the alt attribute (opens in a new tab) shows it has been in HTML since the early 1990s.
The short version
- Alt text says what an image means in its context, so one photo can need different alt text on different pages.
- If an image is the only content of a link, its alt says where the link goes.
- Decorative images get
alt="". Never drop thealtattribute itself. - Any words shown inside an image belong in its alt text too.
Example
<img src="logo.svg" alt="Happy Paws Shelter">
<img src="mountains.svg" alt="">
<img src="cat.svg" alt="Milo, a calm cat stretching in the sun">Your task
The Happy Paws adoption page means nothing to screen reader users. Fix every image:
- The logo: alt text with the shelter's name, Happy Paws Shelter.
- The mountain banner is pure decoration: give it an empty alt,
alt="". - Milo's photo has no alt at all: describe Milo (mention he is a cat or kitten).
- Rex's photo says "image of dog": rewrite it without "image of" and mention he is a dog or puppy.
No alt may contain a file name.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<img src="cat.svg" alt="Milo is a calm cat who loves sunny windows">
<p>Milo is a calm cat who loves sunny windows.</p>Right
<img src="cat.svg" alt="Milo stretching out on a sunny windowsill">
<p>Milo is a calm cat who loves sunny windows.</p>Copy the nearby text and screen reader users hear the same sentence twice, so let the alt add what the photo shows.
Wrong
<img src="sale.png" alt="banner">Right
<img src="sale.png" alt="Summer sale: 20% off all dog beds until Friday">If an image has words in it, those words are the content, and the alt has to include them.
Go deeper
The hard part of alt text is choosing what to say. Ask why the image is on the page. A dog photo on an adoption page needs the dog's name and character. Put the same photo on a page about dog leads and a dog wearing a red harness may be enough. The words depend on the page around the picture.
Complex images need two layers. For a chart, write a short alt that states the main finding, for example Bar chart: adoptions doubled in 2026. Then put the full numbers in a nearby table or paragraph that everyone can read, or in a caption as shown in the lesson on figures and captions.
Icons inside buttons work the same way. A magnifying glass button gets alt text like Search, because users need to know the action; nobody cares that it is a magnifying glass. Image basics such as src and sizing are in the lesson on adding images to a page.
Many site builders and CMS tools now suggest alt text automatically. Treat that as a first draft. The tool can describe what is visible, but it rarely knows why the image is there.
A quick test: turn images off, or read only the alt texts in order. If the page still makes sense, your alt text works.
Frequently asked questions
What is alt text and why is it important?
It is the text in an image's alt attribute. Screen readers read it aloud, browsers show it when the image fails to load, and search engines use it to work out what the picture shows. Without it, blind and low-vision visitors lose whatever the image was telling everyone else. WCAG 2.2 requires a text alternative for every meaningful image (success criterion 1.1.1, Non-text Content (opens in a new tab), Level A).
How long should alt text be?
Short, usually one brief sentence or less, as long as the meaning survives. The HTML standard sets no character limit. Long alt text is hard to pause or skim with a screen reader, though. If an image needs a long explanation, as a chart or diagram often does, give it a short alt and put the details in the visible text or a <figcaption> next to it.
Does alt text help SEO?
Yes. Search engines can't see images the way people do, so they read alt text, file names and the surrounding text, especially for image search. Accurate, specific alt text helps. Keyword stuffing doesn't, and it makes the page worse for screen reader users. Write for people first. Descriptions that serve people serve search too, as Google's image SEO best practices (opens in a new tab) confirm.
