Decorative Images Need alt="", Not Missing Alt — And Complex Images Need More Than One Line

An image's alt text failing both accessibility and SEO is rarer than it sounds — the goals usually align, but when they conflict, accessibility must win, and understanding why reveals something important about what alt text is actually for

The previous articles on this site covered finding missing alt text, writing effective alt text for both goals, image SEO beyond alt text, alt text and ADA/WCAG law, the alt="" vs missing alt distinction, and when accessibility and SEO goals conflict. This article addresses decorative images and complex images — the two categories where alt text decisions are most frequently wrong, and the specific WCAG criteria that govern each.

What makes an image decorative: the WCAG definition

WCAG Success Criterion 1.1.1 requires that non-text content has a text alternative — with a specific exception for decorative images:

Decorative images are images that:

• Don't convey information (their removal wouldn't cause the user to lose any information)
• Serve only a visual or aesthetic purpose
• Are not functional (not a link or button)

For decorative images, the correct markup is alt="" — empty alt attribute (not missing alt attribute):

<!-- Correct for decorative image -->
<img src="decorative-divider.png" alt="">

<!-- Incorrect for decorative image - missing alt causes screen reader to announce the filename -->
<img src="decorative-divider.png">

<!-- Also acceptable - hiding from accessibility tree entirely -->
<img src="decorative-divider.png" alt="" role="presentation">

The test for decorative: would removing the image affect comprehension?

The clearest test for whether an image is decorative:

1. Remove the image from the page
2. Can the user still understand all the page's content and functionality?

If yes → decorative. Use alt="". If no → informative. Provide descriptive alt text.

Examples that are often misidentified as decorative:

• A photo next to an article about climate change showing a specific event: this conveys visual information about that event that the text doesn't fully describe → not decorative
• An icon next to a navigation link: if the icon and the link text both convey the same meaning → possibly decorative; if the icon adds meaning the text doesn't convey → not decorative
• A divider line or border image: typically decorative → alt=""
• An image of a product being sold: not decorative → detailed alt text needed

Complex images: when alt text isn't enough

Complex images — charts, graphs, diagrams, infographics, maps — convey information that can't be adequately communicated in a brief alt text. WCAG provides guidance for these:

WCAG 1.1.1 for complex images: provide a brief alt text identifying what the image is, plus a longer description of the data or information conveyed.

Three techniques for the longer description:

Technique 1: Adjacent text. Describe the chart or diagram in the surrounding text. "The following chart shows..."

<figure>
  <img src="revenue-chart.png" alt="Bar chart: quarterly revenue 2023">
  <figcaption>Q1: £120k, Q2: £145k, Q3: £132k, Q4: £178k. 
  Revenue grew 48% over the year.</figcaption>
</figure>

Technique 2: longdesc attribute (deprecated but still used). Points to a separate page containing the full description. No longer recommended due to poor screen reader support.

Technique 3: aria-describedby. References the ID of another element containing the longer description:

<img src="revenue-chart.png" alt="Bar chart: quarterly revenue 2023" 
     aria-describedby="chart-description">
<div id="chart-description">
  Q1: £120k, Q2: £145k, Q3: £132k, Q4: £178k. Revenue grew 48% in 2023.
</div>

The SEO dimension for complex image alt text

For SEO, complex image alt text should:

• Identify the chart/graph type and the key data point or trend it shows
• Include relevant keywords (if a chart shows "UK mortgage rates 2024," include those words)
• Be specific enough that the alt text stands alone as a description

The alignment with accessibility: a good accessibility description of a chart (identifying the key data and trend) is also good SEO description. These goals don't conflict for complex images — the more informative the alt text, the better it serves both.

Where they do conflict for complex images: length. Accessibility guidelines suggest comprehensive descriptions for complex images; SEO traditionally recommends shorter alt text (under 125 characters for screen reader compatibility, under 100 for SEO cleanliness). For complex images, prioritise the comprehensive description — use aria-describedby for the full description and a concise summary in alt.

Image groups and WCAG: sets of images conveying one concept

Sometimes multiple images together convey one piece of information. WCAG provides guidance:

Pattern 1: All images in a group contribute to one concept. The first image should have full alt text; subsequent images should have alt="".

Pattern 2: A single concept expressed as a composite. If an H2 rating is shown with two filled stars, two half-filled stars, and one empty star — the alt text of the group should convey "2.5 out of 5 stars," not alt text for each individual star.

Automated alt text generation from AI: current state

AI image captioning (from services like Microsoft Azure Computer Vision, Google Cloud Vision, and built-in alt text generation in Word/PowerPoint) can automatically generate alt text.

Current accuracy for accessibility: generally good for identifying objects and scenes ("a brown dog running in a park") but limited for:

• Text in images (requires OCR, sometimes separate)
• Charts and graphs (identifies them as charts but doesn't extract data)
• Technical diagrams (may misidentify components)
• Context-sensitive descriptions (the same image means different things in different articles)

The human review requirement: automated alt text is a starting point, not a replacement for human review. Images where the alt text's accuracy matters (medical, legal, technical) require human verification. Images in creative contexts require an author who understands what the image means in context.

How to use the Image Alt Checker on sadiqbd.com

1. Initial audit: run the tool on any page to identify images with missing or empty alt text — distinguish between intentionally empty (decorative) and accidentally missing (needs alt text added)
2. Complex image audit: for images with very short alt texts (under 20 characters), assess whether they're complex images (charts, graphs, infographics) that need longer descriptions via figcaption or aria-describedby
3. Before publishing: use the checker as a pre-publication step to verify that every functional and informative image has appropriate alt text before the page goes live

Frequently Asked Questions

If I have a hero image at the top of a page that's purely decorative, should I use alt="" or omit the alt attribute entirely? Use alt="" (empty alt attribute) — never omit it entirely. The difference matters significantly for screen readers: an image with no alt attribute at all causes most screen readers to read the filename (hero-image-2024.jpg) as the description, which is meaningless or worse. An image with alt="" signals to the accessibility tree that the image should be completely skipped — the screen reader doesn't announce it at all. For CSS background images (decorative images set as CSS backgrounds rather than <img> elements), no alt attribute is needed — they don't appear in the accessibility tree.

Is the Image Alt Checker free? Yes — completely free, no sign-up required.

Try the Image Alt Checker free at sadiqbd.com — find every image on any page and check their alt text status instantly.