Images need alt text

ZMD004

Every <img> must carry a descriptive alt attribute or an explicit empty alt="" if purely decorative.

✅ Good

<img src="team-photo.jpg" alt="Our design team standing outside the new office building">

❌ Bad

<img src="team-photo.jpg">

When: An <img> has no alt attribute or its alt is empty when image conveys important content

Warning: <img> tag missing alt attribute

Solution: Add descriptive alt text or explicit alt="" for purely decorative images

Why it matters

Accessibility: Missing alt text leaves screen-reader users unaware of image content; null alt on informative images hides key information :contentReference[oaicite:8]{index=8}.

SEO: Without alt text, search engines lack context for images, reducing opportunities to rank in image search :contentReference[oaicite:9]{index=9}.

In brief

  • Goal: Make non-text content accessible through text alternatives.
  • What to do: Provide concise, descriptive alt text for informative images; use alt="" for purely decorative ones.
  • Why: Text alternatives can be rendered in any modality—visual, auditory, or tactile—so no one misses key content.

Intent

Ensure that all visual content is perceivable by assistive technologies and remains meaningful when images fail to load.

Benefits

  • Screen-reader users receive meaningful descriptions instead of “image” or nothing :contentReference[oaicite:3]{index=3}.
  • Keyboard-only users can skip decorative images and focus on relevant content :contentReference[oaicite:4]{index=4}.
  • Search engines index images based on alt text, improving discoverability :contentReference[oaicite:5]{index=5}.
  • Pages with broken images remain understandable via alt text fallback :contentReference[oaicite:6]{index=6}.

Techniques

  • G94: Providing text alternatives for non-text content using the alt attribute on <img> elements.
  • H67: Using null alt text (alt="") for decorative images, optionally with role="presentation".

HTML Semantics

The alt attribute’s value must convey the content or function of the image—avoid describing its format or filename :contentReference[oaicite:7]{index=7}.

References

Tips & edge cases

  • Decorative images: use alt="" and role="presentation" to skip them in assistive-tech navigation :contentReference[oaicite:10]{index=10}.
  • Informative images: keep alt text concise (a brief phrase or sentence), not a paragraph :contentReference[oaicite:11]{index=11}.
  • Linked images: ensure alt describes the link’s purpose (e.g., alt="Read our annual report") :contentReference[oaicite:12]{index=12}.
  • Complex graphics: provide short alt plus a longer description via nearby text or aria-describedby :contentReference[oaicite:13]{index=13}.

See also