How to Fix Missing Alt Text on Images

Summary: To fix missing alt text on images, add a descriptive alt attribute to every <img> tag that describes what the image shows — keeping it under 125 characters, including relevant keywords naturally, and using empty alt="" for purely decorative images. According to WebAIM's annual accessibility study, missing alt text remains the #2 most common accessibility error on the web, affecting over 54% of homepages tested across one million sites.

Missing alt text is one of the most common and most overlooked SEO issues on the web. Every image without alt text is a missed opportunity to rank in Google Image Search, reinforce your page's keywords, and make your site accessible to users who rely on screen readers. The fix takes seconds per image — yet the vast majority of websites still get it wrong.

A web.dev study on image accessibility found that images make up approximately 50% of the average webpage's total weight. Despite being half the content, images are the most under-optimised element on most sites — both for performance and for SEO. Fixing alt text is one of the fastest, highest-impact changes you can make.

What Is Alt Text?

Alt text (alternative text) is an HTML attribute added to image tags that describes what the image shows. It was originally created for accessibility — screen readers read it aloud to visually impaired users — but it's also one of the primary signals Google uses to understand images and rank pages. The W3C Web Accessibility Initiative (WAI) defines alt text as the core mechanism for making images accessible to all users.

The HTML looks like this:

<!-- Without alt text (bad) --> <img src="iphone-screen-repair.jpg"> <!-- With alt text (correct) --> <img src="iphone-screen-repair.jpg" alt="Technician replacing cracked iPhone 15 screen at MobileBarn Sydney"> <!-- Decorative image (intentionally empty alt) --> <img src="decorative-divider.svg" alt="">

When Google crawls your site, it cannot "see" images the way humans do. Alt text is the primary way you tell Google what an image contains — which directly affects whether that image shows up in Google Image Search and whether the surrounding page ranks for related keywords. Google's own image SEO documentation explicitly states: "Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image."

It's worth understanding the difference between missing alt text, empty alt text, and descriptive alt text:

Why Alt Text Matters for SEO

How to Write Good Alt Text

Writing effective alt text is a skill that takes practice but follows clear rules. Here's a comprehensive guide to writing alt text that serves both accessibility and SEO:

The Golden Rules

Alt Text Examples by Image Type

Product images:

<!-- Bad --> <img src="case.jpg" alt="case"> <!-- Good --> <img src="case.jpg" alt="Clear protective case for iPhone 15 Pro Max with raised camera edges">

Team/people photos:

<!-- Bad --> <img src="team.jpg" alt="team photo"> <!-- Good --> <img src="team.jpg" alt="MobileBarn repair technicians at the Sydney store workshop">

Charts and infographics:

<!-- Bad --> <img src="chart.png" alt="chart"> <!-- Good --> <img src="chart.png" alt="Bar chart showing 65% increase in organic traffic after adding alt text to all product images">

Screenshots and UI elements:

<!-- Bad --> <img src="screenshot.png" alt="screenshot"> <!-- Good --> <img src="screenshot.png" alt="WordPress media library showing the alt text field highlighted in the image details panel">

Icons and logos:

<!-- Functional icon (links somewhere) --> <img src="search-icon.svg" alt="Search"> <!-- Brand logo --> <img src="logo.svg" alt="MobileBarn logo"> <!-- Decorative icon (no meaningful content) --> <img src="bullet-dot.svg" alt="">

The W3C Decision Tree for Alt Text

The W3C WAI provides a decision tree for determining the right alt text approach. Here's the simplified version:

How to Check Your Alt Text

Clarity SEO's free SEO Audit scans every image on your site and lists every <img> tag that is missing an alt attribute — including images you may have forgotten about deep in your pages.

→ Run a free SEO audit with Clarity SEO

The full Report Card also flags alt text issues as part of its comprehensive site check. You'll see exactly how many images are missing alt text and which pages they're on.

→ Get your free SEO Report Card

You can also check manually using browser developer tools: right-click any image, select "Inspect Element", and look for the alt attribute in the <img> tag. Chrome's Lighthouse audit also flags images without alt text under the Accessibility section, scoring it as a direct accessibility failure.

For automated monitoring at scale, Google Search Console can help identify image indexing issues, and accessibility tools like WAVE by WebAIM provide detailed reports on alt text compliance across your entire site.

How to Fix Missing Alt Text

For HTML/Generic

Find every <img> tag in your HTML and add a descriptive alt attribute:

<!-- Product image --> <img src="/images/iphone-15-case-clear.jpg" alt="Clear protective case for iPhone 15 Pro Max with raised edges"> <!-- Team photo --> <img src="/images/team-photo.jpg" alt="MobileBarn repair team at our Sydney store location"> <!-- Hero/banner image --> <img src="/images/hero-banner.jpg" alt="Phone repair workstation with tools and iPhone components laid out"> <!-- Decorative image (intentionally empty alt) --> <img src="/images/decorative-divider.svg" alt="">

For a quick audit, use this command in your terminal to find all images without alt text in your HTML files:

grep -rn '<img' *.html | grep -v 'alt='

For Next.js / React

Next.js makes alt text a required prop on its <Image> component — which is great for enforcing accessibility. If you're using the native <img> tag instead, you'll need to add alt text manually:

// Using Next.js Image component (alt is required)
import Image from 'next/image';

<Image
  src="/images/iphone-repair.jpg"
  alt="Technician replacing cracked iPhone 15 screen"
  width={800}
  height={600}
/>

// For decorative images with Next.js Image
<Image
  src="/images/divider.svg"
  alt=""
  width={800}
  height={2}
  role="presentation"
/>

Pro tip: Set up ESLint with the jsx-a11y plugin to automatically flag missing alt text during development. Add it to your .eslintrc and you'll catch missing alt text before it ever reaches production.

For WordPress

Via the Media Library:

This retroactively updates alt text for that image wherever it's used across your site — making it the fastest way to bulk-fix alt text issues.

Via the Block Editor (Gutenberg):

For WooCommerce product images:

Bulk fix with plugins:

Plugins like SEO Optimized Images or Image SEO can auto-generate alt text from filenames or titles for existing images. Useful for large sites with hundreds of images. However, auto-generated alt text is usually generic — treat it as a starting point, then manually refine the most important images (hero images, product images, images on key landing pages).

For Shopify

For product images:

Pro tip: Shopify allows you to set alt text for each variant image separately. If you sell a product in multiple colours, each colour variant's image should have specific alt text (e.g., "iPhone 15 case in midnight blue" vs "iPhone 15 case in forest green").

For theme images (banners, hero images):

For blog post images:

For Wix / Squarespace / Webflow

Wix: Click any image in the editor → Image Settings → What's in the image? field (this is the alt text). Save. Wix also offers AI-generated alt text suggestions for Pro users — review them before accepting as they can be generic.

Squarespace: Click an image block → Edit → Use the Alt Text field in the Image Block settings (newer Squarespace versions). For older versions, the Filename field is used as alt text, but the dedicated Alt Text field is preferable.

Webflow: Select the image in the Designer → right panel → Alt text field. For CMS images, bind alt text to a collection field so each item auto-populates it. This is powerful — create an "Image Alt Text" field in your CMS collection and it generates unique alt text for every item automatically.

Alt Text and Structured Data

Alt text and structured data work together to maximise your image visibility. When you add Product schema with an image property, Google uses both the schema data AND the alt text of that image to understand what it shows. For maximum impact:

Alt Text Optimization Checklist

Use this checklist when auditing images across your site:

Common Mistakes to Avoid

The Business Impact of Alt Text

Let's quantify why alt text matters with real data:

FAQ

What is alt text for images?

Alt text is an HTML attribute (alt) added to <img> tags that describes the image content in text form. It serves two primary purposes: making images accessible to screen reader users (over 2.2 billion people worldwide have some form of vision impairment according to the W3C WAI) and helping search engines understand what the image shows for indexing and ranking purposes. When an image fails to load, the alt text is also displayed as a fallback so users still understand the content.

Does image alt text affect SEO rankings?

Yes. Alt text is a confirmed on-page SEO factor. According to Google's image SEO best practices, alt text helps your images rank in Google Image Search and reinforces the topical relevance of your page for keyword rankings. A Moz study found that image optimisation (including alt text) is one of the top 10 on-page ranking factors. Missing alt text means you're leaving both image search traffic and page relevance signals on the table.

How long should alt text be?

Alt text should be concise but descriptive — typically 5 to 15 words or fewer than 125 characters. Most screen readers cut off alt text at around 125 characters, and overly long descriptions become tiresome for accessibility users. Focus on accurately describing the image in as few words as possible. If an image requires a longer explanation (like a complex chart or infographic), use a short alt attribute combined with a visible description or figcaption element below the image.

Should I add alt text to every single image?

Every image should have an alt attribute, but not every image needs descriptive text. Add descriptive alt text to every image that contains meaningful content — product photos, team images, screenshots, diagrams, charts. For purely decorative images (borders, background patterns, spacers, aesthetic flourishes), use an empty alt attribute (alt="") so screen readers skip them. Never omit the alt attribute entirely — that's always wrong, regardless of image type.

What happens if I leave alt text blank or missing?

There's an important distinction: missing entirely (<img src="photo.jpg">) vs intentionally empty (<img src="photo.jpg" alt="">). When the alt attribute is missing entirely, screen readers read the image filename aloud (e.g., "IMG underscore 4832 dot JPG"), which is useless and frustrating. Google also has less information to work with for ranking. When alt is intentionally empty (alt=""), screen readers skip the image — which is correct for decorative images. In terms of SEO, missing alt text means that image won't appear in Google Image Search and the page loses a relevance signal.

Can AI tools generate alt text automatically?

Yes, several AI tools and CMS plugins can auto-generate alt text from image analysis. WordPress plugins like Image SEO use AI to describe images, and platforms like Wix offer built-in AI alt text suggestions. However, AI-generated alt text has limitations: it tends to be generic ("a laptop on a desk"), misses brand context ("MobileBarn technician repairing iPhone"), and doesn't include target keywords strategically. Use AI as a starting point for bulk fixes on large sites, then manually refine alt text for your most important pages — homepage, top-traffic pages, product pages, and key landing pages.

Related Guides

Alt text is one piece of a comprehensive on-page SEO strategy. Explore these related guides to optimise your entire site:

Summary

Alt text takes seconds to add per image and pays dividends through Google Image Search traffic (22.6% of all web searches), stronger page relevance signals, better accessibility compliance, and improved SEO scores. With over 54% of homepages failing alt text checks according to WebAIM's Million study, fixing this issue gives you an immediate competitive advantage. Audit your images now, add descriptive alt text to every meaningful image, use empty alt="" for purely decorative ones, and validate with an accessibility tool.

Find every image with missing alt text across your site with a free Clarity SEO audit.

→ Get your free SEO Report Card