Alt Text & Accessibility

Empty Alt vs Missing Alt: What's the Difference?

Empty alt (alt="") is deliberate and correct for decorative images. Missing alt is a mistake. Learn how to tell them apart and when to use each.

By Franel II Romanillos, Technical SEO Specialist

#alt text #accessibility #html

An empty alt attribute (alt="") is a deliberate signal that an image is decoration and should be skipped. A missing alt attribute, with no alt at all, is a mistake, because it leaves assistive technology with nothing to go on. They look similar, and checkers often report both under “empty alt text”, but they mean opposite things.

Side by side

Missing altEmpty altDescriptive alt
Code<img src="divider.png"><img src="divider.png" alt=""><img src="chart.png" alt="Line chart of clicks rising from 1,200 to 3,400">
What it tells assistive technologyNothing. Some screen readers fall back to reading the file nameThis image is decoration, skip itThis is what the image shows
Right for decorative images?NoYesNo, it adds noise
Right for meaningful images?NoNoYes
VerdictA mistakeCorrect when used on purposeCorrect for informative images

When empty alt is the right choice

Use alt="" when the image adds nothing a person would miss if it were gone. The W3C’s guidance describes these as decorative images. Typical examples:

  • A divider line or flourish between sections.
  • A decorative border, swirl or background shape.
  • A stock photo that only sets a mood, next to text that does not mention it.
  • An icon that sits right beside text saying the same thing, such as a phone icon next to the words “Call us”.

Screen readers skip an image with an empty alt, so the people who rely on them get a cleaner page.

When empty alt is wrong

Leaving alt empty on a meaningful image hides it from people who cannot see it. Watch for these:

  • Informative images: product photos, charts, diagrams, screenshots and photos that illustrate the content.
  • Images of text: the text should be repeated in the alt.
  • Functional images: an image that is the only content of a link or button needs alt text describing where it goes or what it does. With an empty alt, the link has no readable name, and accessibility audits such as Lighthouse flag links that have no discernible name.

For example, a logo that links to your home page should say where it goes:

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

If that alt were empty, a screen reader user would hear a link with no description.

Why a missing alt is worse than an empty one

An empty alt is a clear instruction. A missing alt is a gap. The HTML standard requires the alt attribute on img elements, with only a few narrow exceptions, so a missing one is also an HTML validation error. Without it, some screen readers read out the file name, such as “IMG underscore 2043 dot jpg”, which is noise at best. WCAG success criterion 1.1.1 asks for text alternatives for meaningful images, and also allows decorative images to be implemented so that assistive technology can ignore them. An empty alt does exactly that.

How to tell which images need what

Ask these questions in order, following the W3C’s decision tree:

  1. Would the page lose anything if this image disappeared? If not, use alt="".
  2. Is the image a link or a button? Describe the destination or action.
  3. Does it contain text? Repeat the text.
  4. Otherwise, describe what it shows, briefly and in context.

For worked examples, see How to Write Good Alt Text.

How to find missing and empty alt attributes

  • The Alt Text Checker separates the two. The Missing Alt Attribute tab shows images with no alt at all, and the Empty Alt Text tab shows images with alt="". Fix the first tab, then review the second to confirm each image really is decorative.
  • The Page Audit Checker counts images with missing or blank alt together, so use it to find the pages with the most issues, then check those pages in the Alt Text Checker.
  • The HTML Validator reports an img without an alt attribute as an error.
  • For a quick look in the browser, see How to Check Alt Text on Any Website.

Common mistakes

  • Treating every empty alt as a problem and filling decorative images with descriptions.
  • Treating every missing alt as harmless because “the image is only decoration”. If it is decorative, add alt="" to say so.
  • Using a space or placeholder text such as alt="image" instead of a real empty value.
  • Leaving a functional image, such as an icon button, with an empty alt.

Frequently asked questions

Is empty alt text bad for SEO?

No. Using alt="" on genuinely decorative images is correct and does no harm. The problem is leaving meaningful images without a description, which hurts both accessibility and how well search engines understand the page.

Is a missing alt attribute an error?

Yes. The HTML standard requires alt on img elements apart from a few narrow cases, so validators flag it, and accessibility audits flag it too.

Do I need role="presentation" as well as alt=""?

For a decorative image, an empty alt is the standard way to tell assistive technology to skip it. You do not normally need anything extra.

What should I put in alt for an image next to a caption?

If the caption already says what the image shows, a short alt text, or an empty one when the image is purely decorative, avoids making people hear the same thing twice. Judge by what a person would miss without the image.

Do CSS background images need alt text?

No. CSS background images are not img elements, so they have no alt attribute and assistive technology ignores them by default. That makes CSS backgrounds a sensible choice for purely decorative visuals. If a background image carries meaning, put the information in real text on the page.

Sources

  1. W3C WAI: Decorative Images
  2. W3C WAI: An alt Decision Tree
  3. W3C WAI: Functional Images
  4. WHATWG HTML Standard: The alt attribute and requirements for alternative text
  5. W3C: Understanding Success Criterion 1.1.1 Non-text Content (WCAG 2.2)