Accessible Images in Practice — alt/Decorative/Diagram 2025

Introduction

Accessibility and SEO overlap but aren’t the same goal. This article focuses on alt design that communicates to screen readers and clarifies practical lines between decorative, informative, and diagram images. For SEO specifics, see Image SEO 2025 — Practical alt text, structured data, and sitemaps.

Alt design principles

• Decorative images: empty alt (alt="") so they’re skipped by screen readers.
• Informative images: state the point concisely, noun-first. Don’t repeat the surrounding text.
• Charts/diagrams: alt is the gist; put details (values/units) in nearby text or a caption.

Frequent cases

• Linked images: alt should reflect the target’s purpose. Avoid file names or verbose descriptions.
• OGP previews: social preview images often duplicate page content; keep alt minimal. See design notes in OGP Thumbnail Design 2025 — Legible, Lightweight, On-Frame.

Implementation pitfalls

• Don’t overuse role="presentation"; prefer semantic HTML with correct alt.
• Prevent over-delivery: combine srcset/sizes. Details: Responsive Images in 2025 — Srcset/Sizes Patterns That Actually Match Layout.

Practical tips

• Use Image Cropper to check diagram legibility and composition.
• Generate responsive sources with Srcset Generator.
• Create OGP thumbnails with OGP Thumbnail Maker.

First decision: decorative, informative, or UI

1. Decorative (atmospheric only) → alt="". No extra roles needed.
2. Informative (needed to understand the text) → concise gist; avoid repetition.
3. UI icons/buttons → alt/accessible name must match the visible label.

Contract for alt

• Alt should be a single sentence that makes sense when read aloud in place.
• Words like “image” or “photo” are usually redundant.
• For data graphics, keep alt to gist+units and put the long description in text/caption.

Examples of poor vs good alt

• Poor: alt="graph"

  • Missing: which metric and trend?

• Better: alt="Monthly revenue in 2024; increasing into Q4"

• Poor: alt="button"

• Better: alt="Add to cart" (for a UI button)

• Poor: alt="company logo"

• Better: alt="Unified Image Tools" (match the link purpose if linked)

Handling complex diagrams (long text elsewhere)

• Keep alt to the gist. Place detailed numbers/notes next to the figure.
• Use <figcaption> to provide context; screen readers handle the flow better than stuffing alt.

Example (Next.js)

<figure>
  <Image src="/charts/sales-2024.png" alt="Monthly revenue in 2024; increasing into Q4" width={960} height={540} />
  <figcaption>Revenue trends upward from July. Unit: 10K.</figcaption>
</figure>

UI icons and accessible names

• If an icon is purely decorative, use alt="" and hide it from accessibility tree.
• If an icon is the only content of a control, provide an aria-label or visible text.
• Avoid duplicating alt and aria-label on the same element; unify the accessible name.

Performance and a11y together

• For the LCP image, use priority/preload while keeping alt concise.
• Optimize sizes/srcset to avoid over-delivery; bandwidth is an a11y concern too.
• Keep text contrast; prefer text HTML over text-in-image for screen reader friendliness.

OGP/social images

• Keep alt minimal to avoid repetition with page content.
• Many preview contexts don’t read alt; ensure the gist exists in body text.
• Details in OGP Thumbnail Design 2025 — Legible, Lightweight, On-Frame.

Test and verification

• Screen readers (NVDA/VoiceOver): check reading order and redundancy.
• Automated checks (Axe/Pa11y): detect empty alt/meaningful images.
• On real pages: keyboard focus and failure behavior when images don’t load.

Preflight checklist

• Decorative images are silent with alt="".
• Informative images: concise gist, no duplication.
• UI icons: accessible name matches the visible label.
• Diagrams: include units/trends in text; alt stays brief.
• Responsive delivery configured (srcset/sizes, format, preload) without harming a11y.

Related

• Image SEO 2025 — Practical alt text, structured data, and sitemaps
• Responsive Images in 2025 — Srcset/Sizes Patterns That Actually Match Layout
• Srcset Generator