Images alt and Decorative

Write useful alt text, mark decorative images correctly, and avoid SEO/a11y anti-patterns like keyword stuffing or missing alt.

beginner3 min readUpdated Aug 4, 2026

html
images
alt
a11y

The alt attribute is the text alternative for an image. Screen readers announce it; it shows when images fail to load; it can feed search. Empty alt and missing alt are different signals — get that distinction right.

Docs: MDN alt, WAI images tutorial, HTML images.

Three cases

1. Informative image

<img
  src="/team/alex.jpg"
  width="400"
  height="400"
  alt="Alex Rivera, product designer, smiling in the office"
/>

Describe the purpose in context — not every pixel. If the image is a chart, summarize the insight or provide a data table nearby.

2. Functional image (inside a control)

<button type="button">
  <img src="/icons/search.svg" alt="" />
  Search
</button>

<a href="/cart">
  <img src="/icons/cart.svg" alt="Cart, 3 items" />
</a>

If adjacent text already names the control, alt="" on the icon avoids double announcement. If the image is the only name, put the name in alt (or aria-label on the control).

3. Decorative image

<img src="/dividers/swirl.svg" alt="" />

<!-- CSS background is also fine for pure decoration -->
<div class="hero-bg" role="presentation"></div>

Empty alt="" tells AT to skip the image. Omitting alt entirely is incomplete markup and often announced via filename — bad.

Linked logos

<a href="/">
  <img src="/logo.svg" alt="Frontend Beauty home" />
</a>

Logo links need a destination-oriented name (“Company home”), not “blue logo PNG.”

Bad alt text

Anti-pattern	Why
`alt="image"`	No information
`alt="IMG_4021.jpg"`	Filename noise
Keyword stuffing	Hurts users; may look spammy
Novel-length alt	Exhausting; put details in caption
Same alt on 20 product shots	Useless differentiation

Captions vs alt

<figure>
  <img src="/chart.png" alt="Bar chart: Q1 revenue rose 12% to $4.2M" />
  <figcaption>Figure 2 — Quarterly revenue</figcaption>
</figure>

figcaption is visible; alt is the short alternative. Don’t force users to hear both identically — coordinate wording.

SVG inline

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Satisfaction scores by cohort</title>
  …
</svg>

Decorative SVG: aria-hidden="true" and focusable false patterns.

Interview out-loud

“Informative images get concise alt that conveys purpose. Decorative images use empty alt. Functional icons either share the control’s accessible name or supply it via alt/aria-label. I never omit alt, and I don’t stuff keywords. Width and height or aspect-ratio prevent layout shift.”

Footguns

Missing alt on CMS-driven images.
alt that duplicates adjacent caption word-for-word excessively.
CSS background images carrying meaning without a text alternative.
Complex images without long description strategy.
Auto-generated alts that say “a person standing” for a “Delete account” icon button.

Chart alternatives

<figure>
  <img
    src="/charts/q2.png"
    alt="Bar chart showing Q2 revenue of 4.2 million dollars, up 12 percent from Q1"
    width="800"
    height="450"
  />
  <figcaption>
    Q2 revenue. Full data in the
    <a href="/data/q2.csv">CSV download</a>.
  </figcaption>
</figure>

For complex charts, pair short alt with a data table or downloadable dataset. Alt is not a place to paste the entire spreadsheet.

CMS workflow

Require alt at upload time for content images; allow an explicit “decorative” checkbox that writes alt="". Do not default to filename. Provide examples in the CMS UI (“Say what the image does for the reader”). Spot-check published pages with an automated axe rule for missing alt and a human pass for quality.