Empty alt text — written as alt="" in HTML — is the correct accessibility answer for decorative images. It tells the screen reader to skip the image cleanly. Missing alt text (no alt attribute at all) is never correct: it makes the screen reader fall back to the filename.

This guide explains when each is right, with concrete examples.

Key Takeaways

• alt="" = correct. Tells screen readers to skip the image.
• Missing alt = incorrect. Screen readers fall back to filename ("DSC_0421-jpg").
• Use alt="" for purely decorative graphics, icons paired with visible text labels, and stylistic patterns.
• Never use alt="" on functional images, product photos, charts, or content that adds meaning.

Empty vs. Missing

The HTML difference is small but consequential:

<!-- Correct: empty alt for decorative image -->
<img src="texture.png" alt="">

<!-- Incorrect: missing alt -->
<img src="texture.png">

Both render identically for sighted users. For screen reader users, they're night and day. The empty version says "skip me." The missing version says "I don't know what to call me — read the filename out loud."

When Empty Alt Is Right

1. Decorative graphics

Background patterns, stylistic borders, abstract shapes that exist purely for visual flair. Removing them wouldn't change the meaning of the page.

<img src="abstract-pattern.svg" alt="" class="background-decoration">

2. Icons paired with visible text labels

If a visible "Settings" label sits right next to a gear icon, the icon doesn't need to be announced. The label already says it.

<a href="/settings">
  <img src="gear.svg" alt="">
  Settings
</a>

3. Spacer images

Invisible 1x1 pixel images used for layout (a holdover from table-based layouts) should always have alt="". Better fix: replace them with CSS.

4. Images that are already described in adjacent text

If the paragraph next to the image already says everything the alt text would, you can use empty alt to avoid redundancy. Sparingly — most of the time the alt text adds value the paragraph doesn't.

When Empty Alt Is Wrong

1. Product photos

Every product photo conveys information a buyer wants. Empty alt on a product image fails the buyer who can't see it.

2. Charts and graphs

Charts contain data. Skipping them means the screen reader user gets no data.

3. Infographics

Even highly visual infographics carry information. Use a short alt text plus a long description in surrounding text.

4. Hero images that frame the page topic

If the hero image illustrates the article's topic, it's informative. Describe it.

5. Logos that link somewhere

A linked logo's alt text becomes the link's accessible name. Empty alt makes the link unlabeled — the screen reader user doesn't know where it goes.

The "Would Removing It Change Anything?" Test

Two-question test for any image:

1. If I removed this image, would the meaning of the page change?
2. If a sighted reader skipped this image, would they miss something?

If both answers are no, it's decorative — use alt="". If either is yes, it's informative — write descriptive alt text.

How CMS Platforms Handle This

Most CMS platforms (WordPress, Shopify, Squarespace) have an alt text field for every image upload. Leaving the field blank typically results in alt="" — the correct decorative outcome. But platforms vary: some default to the filename if alt is left blank. Test by uploading an image with no alt text and inspecting the rendered HTML.

For ecommerce stores with thousands of product images, this defaulting behavior matters at scale. AltText.ai integrates with WordPress, Shopify, and other CMSes to backfill descriptive alt text instead of relying on the default.

Related

• Decorative Images and Alt Text
• What Is Alt Text?
• Common Alt Text Mistakes
• WCAG Alt Text Guide