Goal
You’ll be able to write genuinely useful alt text for images, and understand the real difference between decorative and meaningful images in terms of how they should be marked up.
Learn
The <img> element embeds an image, using two essential attributes:
<img src="dog.jpg" alt="A golden retriever running on a beach">
src points to the image file. alt provides a text alternative — read aloud by screen readers, shown if the image fails to load, and used by search engines to understand image content, since they can’t “see” the image itself.
Writing genuinely good alt text is a real skill, not just filling in any description. Good alt text describes the image’s purpose and content in context, not just literally what’s visible. For a product photo on a shopping site, “A red running shoe, side view” is more useful than just “shoe” — but overly long, unnecessarily detailed descriptions can also be unhelpful clutter for someone listening via screen reader.
For genuinely decorative images that add no real content meaning (like a purely visual divider graphic), the correct alt text is an empty string: alt="". This deliberately tells screen readers to skip the image entirely, rather than reading a description of something with no actual informational value — leaving alt off entirely is different and worse, since some screen readers will then read the filename aloud instead.
Decision Task
An e-commerce page has a product photo of a blue backpack, and separately, a purely decorative dotted-line divider image between two sections. Before reading on: should both get descriptive alt text, or does one need different treatment?
Show Answer
Different treatment. The product photo needs genuinely descriptive alt text, like alt="A blue canvas backpack with front pocket", since it’s meaningful content. The decorative divider should get alt="" (empty, not omitted) specifically to tell screen readers to skip it, since it carries no real informational content.
Common Mistake
Leaving the alt attribute off entirely for a decorative image, rather than deliberately setting it to an empty string. Some screen readers will fall back to reading the image’s filename aloud when alt is missing entirely (something unhelpful like “dotted-line-graphic-2-final.jpg”), while alt=”” explicitly and correctly tells the screen reader to skip the image as non-content.
Practice Questions
1. Write an img element for a company logo, with a meaningful alt description.
Show Answer
<img src="logo.png" alt="CompanyName logo"> (or similar reasonable description).
2. Why is alt=”” different from omitting the alt attribute entirely, for a decorative image?
Show Answer
alt=”” deliberately tells screen readers to skip the image as non-content; omitting alt entirely can cause some screen readers to read the filename aloud instead, which is unhelpful.
3. A photo shows a smiling customer holding a product on a testimonials page. What makes alt text like “Happy customer holding [Product Name], smiling” more useful than just “customer”?
Show Answer
It captures the actual purpose/content of the image in context (a testimonial featuring a specific product), rather than a bare, uninformative label that loses the meaningful detail.
4. True or False: alt text should always be as long and detailed as possible for maximum accessibility.
Show Answer
False — alt text should be genuinely useful and appropriately concise; excessively long, over-detailed descriptions can become unhelpful clutter for someone listening via screen reader.
5. When is it appropriate to use alt=””?
Show Answer
For purely decorative images that add no real content or informational meaning, so screen readers can correctly skip them.
Try It Yourself
Without looking back, write an img element for a purely decorative background pattern image (no real content meaning), correctly marked so screen readers skip it.
Show Answer
<img src="pattern.png" alt=""> — the empty alt (not omitted) correctly signals this is decorative and should be skipped by screen readers.
Quick Check
1. What does the src attribute on img specify?
Show Answer
The image file’s location/path.
2. What does the alt attribute provide?
Show Answer
A text alternative describing the image, used by screen readers, shown on load failure, and read by search engines.
3. What should alt text be set to for a purely decorative image?
Show Answer
An empty string, alt=””, not omitted entirely.
4. Why is omitting alt worse than setting it to an empty string for decorative images?
Show Answer
Omitting it entirely can cause some screen readers to read the image’s filename aloud instead, which is unhelpful; alt=”” deliberately signals “skip this.”
5. What makes alt text genuinely good, beyond just being present?
Show Answer
It describes the image’s actual purpose and content in context, appropriately concise, not just a bare label or an overly long description.