Writing Alt That Conveys Purpose, Not Pixels
Describe what the image means in context.
Writing Alt That Conveys Purpose, Not Pixels is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Describe Meaning, Not Looks
Good alt text describes what an image means in context, not a pixel-by-pixel account of every color and shape.
Purpose Over Pixels
Ask why the image is here. The answer is its purpose, and your alt text should deliver exactly that, nothing more.
Skip Image of
Do not start with image of or photo of. Screen readers already announce it is an image, so those words just waste time.
<img src="cat.jpg" alt="A tabby cat asleep on a keyboard">Keep It Tight
Aim for a short, complete phrase, usually under about 125 characters. If you need more, the image may be complex.
Context Changes Everything
The same dog photo might be a breed example or a happy-customer story. Let the surrounding context shape your words.
Images That Are Links
When an image is the only thing inside a link, its alt must describe the link destination, not just the picture.
<a href="/home"><img src="logo.svg" alt="Acme home"></a>Images of Text
If a graphic contains words, your alt text must include all of that text so nothing is lost to non-sighted users.
Do Not Repeat Nearby Text
If a caption right next to the image already says it, an empty alt avoids making screen readers hear it twice.
Write for Equivalence
Imagine reading your alt text aloud to someone on the phone. If they get the same point, you achieved true equivalence.
Avoid Keyword Stuffing
Alt text is not an SEO dumping ground. Cramming in keywords hurts real users and is exactly what good alt avoids.
Punctuation Helps Pacing
End alt text with a period. That small punctuation gives the screen reader a natural pause before moving on.
Quick Check
Pick the strongest alt text below.
Recap
Great progress! Strong alt text captures purpose in a tight phrase, skips image of, respects context, and never stuffs keywords.
Frequently asked questions
Is the “Writing Alt That Conveys Purpose, Not Pixels” lesson free?
Yes — the full text of “Writing Alt That Conveys Purpose, Not Pixels” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Writing Alt That Conveys Purpose, Not Pixels”?
Describe what the image means in context. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Writing Alt That Conveys Purpose, Not Pixels” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Informative vs Decorative: The First Decision
- Writing Alt That Conveys Purpose, Not Pixels
- Empty alt and the Hidden Decorative Image
- Complex Images: Charts, Maps, and Long Descriptions