HTML

Lesson 05

Images and alternative text

Write alt text for meaningful images and hide decorative images from assistive technology.

Good Code

article-card.html
<article>
  <!-- Alt text describes meaning, while decorative images stay silent. -->
  <img src="/charts/review-time.png" alt="Review time dropped from 3 days to 1 day" />
  <img src="/decorations/divider.svg" alt="" />
  <h2>Faster pull request reviews</h2>
</article>

Bad Code

article-card.html
<article>
  <!-- File names and decorative descriptions add noise for screen readers. -->
  <img src="/charts/review-time.png" alt="review-time.png" />
  <img src="/decorations/divider.svg" alt="blue squiggle divider" />
  <h2>Faster pull request reviews</h2>
</article>

Review Notes

What to review

Good Code

The good version describes the meaningful chart by its message and gives the decorative divider an empty alt attribute.

Bad Code

The bad version exposes file names and decorative noise, so assistive technology announces details that do not help the reader.

Takeaways

  • Alt text should explain the image purpose in context, not repeat the file name.