DEV Community

Cover image for How to Check if an Image Has Alt Text — 4 Methods I Actually Use
Rustamjon Akhmedov
Rustamjon Akhmedov

Posted on • Originally published at altaudit.com

How to Check if an Image Has Alt Text — 4 Methods I Actually Use

If you've ever wondered whether the images on your site actually have alt text — you're not alone. It's one of those things that's easy to forget and surprisingly tedious to check manually.

I've been working on accessibility tooling for a while now, and these are the four methods I rely on daily — from quick one-off checks to full site audits.

Why bother checking?

Alt text does two things:

  1. Screen readers use it to describe images to visually impaired users.
  2. Search engines use it to understand what an image shows.

Missing alt text is the most common WCAG violation on the web (WCAG 1.1.1). And fixing it is usually straightforward — you just have to know where the gaps are.

Method 1: View Page Source

The old-school way. Still works perfectly.

  1. Right-click anywhere on the page → View Page Source (or Ctrl+U / Cmd+U)
  2. Ctrl+F → search for <img
  3. Check each image tag for the alt attribute
<!-- ✅ Good -->
<img src="photo.jpg" alt="A woman reading a book in a library">

<!-- ❌ Missing -->
<img src="photo.jpg">

<!-- ⚠️ Empty (valid only for decorative images) -->
<img src="divider.png" alt="">
Enter fullscreen mode Exit fullscreen mode

Quick note: alt="" is actually correct for purely decorative images. WCAG says screen readers should skip these.

Method 2: DevTools (Inspect Element)

This is my go-to for checking a specific image:

  1. Right-click the image → Inspect
  2. DevTools opens with the <img> tag highlighted
  3. Look for the alt attribute right there

It takes about 3 seconds. You can also hover over elements in the panel to see which image you're looking at — super useful on image-heavy pages.

Method 3: WAVE Browser Extension

WAVE is a free accessibility checker from WebAIM. It overlays visual indicators directly on the page:

  • 🔴 Red icon = missing alt text (error)
  • 🟢 Green icon = alt text present
  • Summary panel shows total error count

Install the Chrome or Firefox extension, navigate to any page, click the icon. Done. You get an instant visual map of every accessibility issue — not just alt text.

I use WAVE when I want a broader accessibility check beyond just images.

Method 4: Scan your entire site at once

The methods above work great for individual pages. But if you're managing a site with hundreds or thousands of images, checking one page at a time isn't realistic.

This is why I built Alt Audit. It crawls your entire domain and flags every image that's:

  • Missing an alt attribute entirely
  • Has an empty alt where it shouldn't be
  • Has alt text that's suspiciously short, long, or auto-generated (like IMG_4823.jpg)

You get a prioritized report so you can fix the worst issues first, and it can generate AI-powered alt text suggestions for the ones that need it.

Writing good alt text (once you find the gaps)

Finding missing alt text is step one. Writing good replacements is step two. A few rules I follow:

Be specific, not generic. "Golden retriever puppy playing in autumn leaves" beats "dog photo."

Keep it under 125 characters. Screen readers may truncate longer text.

Skip "Image of" / "Photo of." Screen readers already announce that it's an image.

Match the context. The same chart might need different alt text on a marketing page vs. a data report.

Mistakes I see constantly

After auditing thousands of sites, these come up again and again:

  • Filenames as alt text — banner-v2-final.png is not alt text
  • Keyword stuffing — "best cheap shoes buy shoes online" helps no one and can hurt your SEO
  • Same alt text on every image — screen reader users can't tell them apart
  • No alt attribute at all — some CMS themes and plugins just don't add one

Wrapping up

Checking alt text is one of those small things that has an outsized impact — on accessibility, on SEO, and on the overall quality of your site. Start with DevTools for quick checks, use WAVE for page-level audits, and use a crawler like Alt Audit when you need the full picture.

If you want the complete walkthrough with screenshots and more detail, I wrote a longer version here: How to Check if an Image Has Alt Text (4 Easy Methods)


What's your go-to method for checking alt text? I'd love to hear in the comments.

Top comments (0)