Writing Alt Text That Works
The art of describing images for people who cannot see them.
Every content <img> needs an alt attribute — but good alt text is a skill, not a checkbox. It's read aloud by screen readers, shown when images fail, and indexed by search engines.
Describe purpose, not pixels
Ask: why is this image here? Describe the information it conveys, not a literal pixel inventory. For a product photo, the alt is the product; for a chart, it's the takeaway, not "a chart."
The decision tree
- Informative image → describe its content and purpose concisely.
- Decorative image (borders, flourishes) → use empty
alt=""so screen readers skip it entirely. An empty alt is very different from a missing one. - Image inside a link → the alt should describe the link's destination.
- Complex image (infographic) → give a short alt plus a longer description nearby in the text.
Don't
- Start with "Image of..." — the screen reader already says "image."
- Stuff keywords — it reads as spam to users and engines alike.
- Leave alt off entirely on meaningful images.
Example
Loading editor…
Press Run to see the result.
When to use it
- A product page writes alt text describing the product angle and color rather than "product image" so blind shoppers get useful details.
- A decorative divider image uses alt="" so screen readers skip it entirely and do not distract users with irrelevant audio.
- A data chart image uses a long description in a <figcaption> or aria-describedby to convey the chart data to non-sighted users.
More examples
Descriptive alt for informative image
Good alt text describes what is in the image and why it matters in context, not just "diagram".
<img
src="html-structure.png"
alt="Diagram showing HTML document structure: html contains head and body; body contains h1, p, and ul"
width="600" height="400"
>Empty alt for decorative image
alt="" tells screen readers the image is decorative and should be ignored; role="presentation" reinforces this.
<!-- Decorative separator: screen readers skip it -->
<img src="wave-divider.svg" alt="" role="presentation" width="1200" height="60">
<section>
<h2>Our courses</h2>
</section>Complex chart with linked description
aria-describedby links the image to a detailed text description, providing data chart access to all users.
<figure>
<img
src="enrollment-chart.png"
alt="Bar chart of monthly enrollments"
aria-describedby="chart-desc"
width="700" height="400"
>
<figcaption id="chart-desc">
Monthly enrollments: Jan 320, Feb 410, Mar 550, Apr 480,
May 620, Jun 700. Trend is upward with a dip in April.
</figcaption>
</figure>
Discussion