Missing Alt Text on Images

Your images are invisible to screen readers. Alt text is how you describe what's in the picture — and the cat insists on it.

What is this?

Imagine a radio DJ is describing a news story and says "just look at this photo" — but you are listening on the radio. You cannot see it. That is exactly what happens when a screen reader hits an image without alt text. It either skips the image entirely or, worse, reads out the file name: "IMG underscore 3847 underscore final underscore v2 dot jpeg." Not helpful.

Alt text (short for "alternative text") is a short description you add to images so that people who cannot see them still understand what they show.

Why it matters

For your visitors: About 2.2 billion people worldwide have some form of vision impairment. Screen reader users, people with slow connections who have images turned off, and anyone with a broken image link all depend on alt text. Without it, your content has holes.
For your business: Search engines cannot see images either — they read alt text. Good alt text improves your SEO, makes your content shareable (social media previews use it), and demonstrates that your site is professionally built.
The standard: WCAG 1.1.1 (Non-text Content) requires that all meaningful images have text alternatives. This is a Level A requirement — the most basic level of accessibility.

Descriptive alt text

<img
  src="/dashboard-screenshot.png"
  alt="Analytics dashboard showing a 42% increase in weekly active users"
/>

Missing or useless alt text

<!-- No alt at all — screen reader reads filename -->
<img src="/dashboard-screenshot.png" />

<!-- Useless alt text -->
<img src="/dashboard-screenshot.png" alt="image" />
<img src="/dashboard-screenshot.png" alt="screenshot" />

How to fix it

React / Next.js

With Next.js Image component, the alt prop is required — but you still need to write a good one.

// src/components/feature-card.tsx
import Image from "next/image";

export function FeatureCard() {
  return (
    <div>
      {/* Meaningful image: describe what it shows */}
      <Image
        src="/analytics-chart.png"
        alt="Bar chart comparing page load times: before optimization at 4.2 seconds, after at 1.1 seconds"
        width={600}
        height={400}
      />

      {/* Decorative image: use empty alt to hide from screen readers */}
      <Image src="/decorative-wave.svg" alt="" width={1200} height={80} aria-hidden="true" />

      {/* Logo used as a link: alt should describe the destination */}
      <a href="/">
        <Image src="/logo.svg" alt="CoolApp homepage" width={120} height={40} />
      </a>
    </div>
  );
}

Plain HTML

<!-- Product photo: describe the product -->
<img
  src="/headphones.jpg"
  alt="Wireless over-ear headphones in matte black with cushioned ear pads"
/>

<!-- Screenshot: describe what's shown -->
<img
  src="/signup-flow.png"
  alt="Three-step signup process: enter email, choose plan, start trial"
/>

<!-- Decorative image: empty alt hides it from screen readers -->
<img src="/decorative-divider.svg" alt="" />

<!-- Icon inside a button: the button text provides context -->
<button>
  <img src="/search-icon.svg" alt="" />
  Search
</button>

<!-- Icon-only button: alt text is essential -->
<button>
  <img src="/menu-icon.svg" alt="Open navigation menu" />
</button>

Writing good alt text:

Describe the content and function, not the file: "Team photo of five people smiling" not "team-photo.jpg"
Keep it concise: aim for one sentence, under 125 characters
Skip "image of" or "picture of" — screen readers already announce it as an image
For decorative images (backgrounds, dividers, icons next to text), use alt=""

High impact — accessibility~2 paws

Missing alt text is one of the first things the cat checks, and one of the easiest things to fix. Every meaningful image needs a description. No exceptions.

How the cat scores this

The cat finds every <img> and checks for an alt attribute. Images with no alt attribute at all are flagged as errors. Images with generic alt text like "image", "photo", "screenshot", or the file name are flagged as warnings. The cat also checks images inside links — if the image is the only content in a link, the alt text must describe the link destination. Decorative images with alt="" are correctly ignored.