Decorative images don't need descriptive alt text — they need empty alt text (alt=""). Marking them correctly improves the screen reader experience by skipping noise. Marking them incorrectly — either describing them when you shouldn't, or omitting alt entirely — hurts the user.

This guide explains the W3C's decorative-image definition, gives you a decision tree, and covers the cases where the line is fuzzy.

Key Takeaways

• Decorative images add visual flair but no information — removing them wouldn't change the page's meaning.
• Mark decorative images with alt="" (empty string) — never omit the alt attribute.
• If the image is referenced or described elsewhere on the page, it's also decorative for accessibility purposes.
• Pure CSS backgrounds (via background-image) don't need alt at all — they're invisible to screen readers by design.

The W3C's Definition

The W3C's decorative images tutorial defines decorative images as those that:

• Add visual decoration but don't add information
• Are described elsewhere on the page (in surrounding text or a caption)
• Are used for layout or non-informative purposes

If an image fits any of those, mark it alt="".

Examples: Decorative

1. Background patterns

Subtle abstract patterns behind a hero section. They're aesthetic. alt="".

2. Section dividers and ornamental flourishes

Decorative SVG dividers, line breaks with curlicues, ornamental borders. alt="".

3. Icons paired with text labels

A gear icon next to the word "Settings" is decorative — the label says it. alt="".

4. Stock photos that illustrate a vibe but no specific subject

Generic "people working at laptops" stock photos paired with text that already describes the activity. The image is mood, not information. alt="" is defensible (though descriptive alt is also fine if you prefer).

Examples: NOT Decorative (Need Real Alt Text)

1. Product photos

Every product photo carries information about what's being sold. Always describe.

2. Charts, graphs, and data visualizations

Data is informative by definition. Always describe.

3. Hero images that depict a specific subject

If the hero shows "the Eiffel Tower at sunset" as part of a Paris travel guide, it's informative. Describe.

4. Memes

The text overlay is information. Transcribe it in the alt text.

5. Diagrams and infographics

Information-dense by design. Use short alt text plus a longer description in surrounding text.

Decision Tree

For any image, ask:

1. Does the image convey information that isn't in the surrounding text? Yes → describe it. No → continue.
2. Would removing the image change the meaning of the page? Yes → describe it. No → continue.
3. Is the image purely visual flair (pattern, ornament, divider)? Yes → alt="". No → describe it.
4. Is the image already fully described in adjacent text or caption? Yes → alt="". No → describe it.

CSS Background Images

Images set via CSS (background-image: url(...)) don't appear in the HTML at all — there's no <img> element to add an alt attribute to. Screen readers ignore them by design. This is the right pattern for purely decorative imagery: keep it in CSS, and you don't have to think about alt text.

If a "background" image actually carries content meaning (like a logo or hero photo), use <img> with proper alt text instead.

Common Mistakes

• Missing alt instead of empty alt. Screen readers fall back to the filename. Always include the attribute.
• Describing decorative images. "Abstract blue swirl pattern" is noise the screen reader user doesn't need.
• Using alt="" on linked images. An empty alt on a linked image makes the link unlabeled — disastrous for keyboard and screen reader users.
• Marking informative images decorative to "save time." WCAG SC 1.1.1 violation; auditors flag it.

Related

• Empty Alt Text: When alt="" Is Correct
• Common Alt Text Mistakes
• What Is Alt Text?