How to Fix Missing Alt Text on Images (and Why It Matters)

Run any accessibility audit and you will almost certainly see this:

Image elements do not have [alt] attributes

This means your <img> tags are missing the alt attribute. It sounds minor, but it breaks both accessibility and SEO in ways that compound across an entire site.

What alt text actually does

The alt attribute provides a text alternative for an image. Screen readers announce this text to users who cannot see the image. Search engine crawlers use it to understand image content. And when an image fails to load, the browser displays the alt text as a fallback.

Without it, screen readers handle the image poorly. Most will fall back to reading the file name, which produces output like “DSC underscore zero four seven three dot jpeg.” That’s noise, not information. Some screen readers skip the image entirely. Either way, the user has no idea what the image conveys.

The difference between no alt and empty alt

These two are not the same:

<!-- No alt attribute at all — accessibility violation -->
<img src="photo.jpg">

<!-- Empty alt — deliberately marks image as decorative -->
<img src="photo.jpg" alt="">

When you write alt="", you tell assistive technology: “This image is decorative. Skip it.” The screen reader ignores it entirely, which is the correct behavior for images that add visual flair but carry no meaning.

When you omit alt entirely, assistive technology doesn’t know your intent. It has to guess, and it guesses badly.

Common causes

1. Informative images with no alt text

The image communicates something meaningful, like a product photo, a chart, or a screenshot, but has no alt attribute.

<!-- Bad -->
<img src="/images/dashboard-overview.png">

Fix: Describe what the image shows in a way that conveys the same information.

<img src="/images/dashboard-overview.png" alt="Dashboard showing 3 active projects with a total of 12 open issues">

Good alt text is specific. “Dashboard screenshot” is too vague. Describe what the user would learn by looking at the image.

2. Decorative images without empty alt

Icons, background flourishes, and spacer images that carry no meaning still need the alt attribute. They just need it set to an empty string.

<!-- Bad — screen reader will try to describe this -->
<img src="/icons/divider-line.svg">

<!-- Good — screen reader skips it -->
<img src="/icons/divider-line.svg" alt="">

For purely decorative images, you can also use aria-hidden="true" alongside the empty alt, or move the image to CSS background-image where it’s invisible to the accessibility tree entirely.

<img src="/icons/decorative-swirl.svg" alt="" aria-hidden="true">

3. Images inside links with no other text

When an image is the only content inside a link, the alt text becomes the link’s accessible name. Without it, screen readers announce the link as something like “link, image” with no indication of where it goes.

<!-- Bad — no accessible link name -->
<a href="/home">
  <img src="/logo.svg">
</a>

<!-- Good -->
<a href="/home">
  <img src="/logo.svg" alt="Hushbug home">
</a>

4. CMS or dynamic content without alt fields

Content management systems and dynamic image galleries often render images from a database. If the content model doesn’t include an alt text field, every image ships without one.

Fix: Add an alt text field to the content model. Make it required. If you’re working with an existing dataset of images without alt text, prioritize adding it to images inside links and images that convey critical information.

5. Icon fonts and SVGs used as images

SVG elements used as images need accessible names too. Inline SVGs are not <img> tags, so alt doesn’t apply. Use aria-label or a <title> element inside the SVG instead.

<!-- Inline SVG with accessible name -->
<svg role="img" aria-label="Warning icon">
  <title>Warning icon</title>
  <path d="..." />
</svg>

<!-- Decorative inline SVG -->
<svg aria-hidden="true" focusable="false">
  <path d="..." />
</svg>

Writing good alt text

A few guidelines that hold up across most cases:

• Be specific. “Graph” is not useful. “Line graph showing a 40% increase in signups from January to March” is.
• Skip “image of” or “photo of.” Screen readers already announce that the element is an image. Starting alt text with “image of” is redundant.
• Keep it concise. One to two sentences. If the image requires a paragraph of explanation, put that in the surrounding text and keep the alt text as a summary.
• Match the context. The same image might need different alt text depending on where it appears. A product photo on a listing page needs a different description than the same photo on a comparison page.

Prevention

Catch missing alt text before it reaches production:

• eslint-plugin-jsx-a11y flags missing alt in JSX at lint time
• axe DevTools or Lighthouse in Chrome catch it during manual testing
• HTML validators flag the missing attribute in raw HTML
• CI accessibility scans (axe-core, pa11y) catch it in pull requests before merge

The rule is simple: every <img> gets an alt attribute. If the image is meaningful, describe it. If it’s decorative, use alt="". There is no case where omitting alt entirely is correct.

Hushbug detects accessibility violations like missing alt text automatically while you browse. Coming soon to the Chrome Web Store.