Is Your Alt Text Actually Good? A Developer's Guide to Writing (and Checking) Descriptions That Work

You've added alt text. But is it any good?

Most developers I talk to treat alt text as a binary thing: either the alt attribute is there or it isn't. But the spec is more nuanced than that, and bad alt text — alt text that's technically present but useless — can be just as harmful as no alt text at all.

This guide covers how to write effective alt text, how to evaluate what you've already got, and how to use a free checker to get instant quality scores.

Why "Any Alt Text" Isn't Good Enough

Here's a quick breakdown of common failure modes:

<!-- Failure 1: Missing entirely -->
<img src="product-shot.jpg">

<!-- Failure 2: Filename as alt text (useless) -->
<img src="IMG_2847.jpg" alt="IMG_2847.jpg">

<!-- Failure 3: Generic descriptor (nearly useless) -->
<img src="team.jpg" alt="image">

<!-- Failure 4: "Image of" redundancy (screen readers already say "image") -->
<img src="ceo.jpg" alt="Image of CEO">

<!-- Failure 5: Keyword stuffing (bad for everyone) -->
<img src="shoe.jpg" alt="Nike shoe shoes footwear buy Nike cheap Nike shoes">

<!-- What actually works -->
<img src="product-shot.jpg" alt="Black Nike Air Max 90 running shoes on white background, side view">

Each of those failures has a real impact. Screen reader users get confusing or no information. Search engines can't index the image content. Accessibility audits fail. Lawsuits cite them.

The Alt Text Quality Scoring Framework

Here's how I think about alt text quality — a framework you can apply yourself or automate:

Score: 0 — Missing or empty (for meaningful images)

<img src="chart.png">  <!-- 0/100 -->
<img src="chart.png" alt="">  <!-- 0/100 for meaningful image -->

Empty alt text (alt="") is correct for purely decorative images. It tells screen readers to skip the image. But for any image that conveys information, this is a critical failure.

Score: 20-30 — Filename or generic label

<img src="DSC_0023.jpg" alt="DSC_0023.jpg">  <!-- 20/100 -->
<img src="team.jpg" alt="photo">  <!-- 25/100 -->

Better than nothing, barely. The field is filled but the value is meaningless to users and search engines alike.

Score: 40-50 — Generic but relevant

<img src="annual-report.jpg" alt="report cover">  <!-- 45/100 -->
<img src="team.jpg" alt="team photo">  <!-- 45/100 -->

At least it's contextually relevant, but it doesn't describe what's actually in the image. Who's on the team? What does the report cover look like?

Score: 70-80 — Specific and descriptive

<img src="team.jpg" alt="Five engineers gathered around a whiteboard in a modern office">  <!-- 75/100 -->

This is passing. It describes who and what is visible. A screen reader user gets useful context.

Score: 90-100 — Specific, contextual, appropriately concise

<img src="q4-results.jpg" alt="Bar chart showing 45% revenue increase in Q4 2024 compared to Q3">  <!-- 95/100 -->

Describes subject, context, and relevant detail. Under 125 characters. No redundant phrases. This is the target.

The Do's and Don'ts at a Glance

Do:

• ✅ Be specific — describe what's actually visible
• ✅ Keep it under 125 characters (screen readers may truncate longer text)
• ✅ Include relevant context (who, what, where for people; data for charts)
• ✅ Use natural language with relevant keywords where they fit organically
• ✅ Use alt="" for purely decorative images

Don't:

• ❌ Start with "Image of", "Photo of", "Picture of"
• ❌ Use the filename as alt text
• ❌ Repeat the surrounding text verbatim
• ❌ Keyword stuff
• ❌ Leave it blank for meaningful images

Alt Text by Image Type

Different images need different approaches:

Image type	What to describe
Product photo	Color, type, key features, angle/background
Person / headshot	Name (if known), role/context, setting
Data chart / graph	Chart type, key finding or trend, time period
Screenshot	What UI is shown, what action is being demonstrated
Logo	Brand name + "logo"
Decorative	alt="" — no description needed
Infographic	Summarize the key information conveyed
Button/icon image	The action the button performs

How to Check Your Existing Alt Text

Option 1 — Browser DevTools (manual)

Right-click any image → Inspect → look for the alt attribute in the HTML:

// Check all images on a page with console one-liner
document.querySelectorAll('img').forEach(img => {
  console.log({
    src: img.src,
    alt: img.alt,
    hasAlt: img.hasAttribute('alt'),
    isEmpty: img.alt === ''
  });
});

This gets tedious fast for large pages. And it only checks the current page.

Option 2 — Free Alt Text Checker (instant quality score)

Alt Audit's free alt text checker lets you paste any existing alt text and get an instant quality score with specific feedback:

• Length check (is it too short, too long, or just right?)
• Redundancy detection (does it start with "image of"?)
• Filename detection (is it just a filename?)
• Descriptiveness scoring (does it have enough words to be meaningful?)

It also gives a suggested improvement when the score is below 70, so you're not just told what's wrong — you get direction on how to fix it.

Option 3 — AI Generation for New or Missing Alt Text

If you have images with no alt text at all, manually checking won't help — you need to generate from scratch. The same tool offers AI-powered generation: upload an image and get an auto-generated, quality alt text description based on what's actually in the image.

Free tier includes 25 AI-generated alt texts per month, no credit card required.

Building Alt Text Into Your Dev Workflow

The real fix isn't one-time cleanup — it's making good alt text the default:

For developers:

• Add alt attribute as a required field in your CMS or component system
• Lint HTML in your CI/CD for missing alt attributes:

# Using axe-core CLI
npx axe https://yoursite.com --rules image-alt

For content teams:

• Create an alt text style guide with examples by image type
• Make alt text a required field in your media upload workflow
• Review AI-generated alt text before publish for brand or data-sensitive images

For agencies:

• Include an alt text audit in every site deliverable
• Use Alt Audit's site scanner to generate a compliance report for clients

TL;DR

Alt text quality exists on a spectrum. Empty is not the same as bad, and bad is not the same as good. The goal is specific, concise, and contextual — describing what's actually in the image in a way that serves both screen reader users and search engines.

If you're unsure where your current alt text stands, start with the free alt text checker. Paste in a description, get a quality score, and see exactly what to improve. It takes 30 seconds and you might be surprised by what you find.

---

This post was originally published on Alt Audit — Free Alt Text Checker. Get 25 free AI-generated alt texts per month with a free account.