Images Missing Alt Text — How to Fix

Why it matters

Over 7.6 million Americans have visual disabilities, and millions more use screen readers due to cognitive, learning, or reading disabilities. Screen readers convert on-screen text and image alt text into speech or Braille output. Without alt text, a screen reader user hears nothing useful when encountering an image — or worse, hears a raw filename like "IMG_3847_cropped_final_v2.jpg." On e-commerce sites, missing alt text means blind shoppers cannot understand product images, making purchase decisions impossible. For news and content sites, infographic-heavy articles are completely inaccessible. WCAG 1.1.1 (Non-text Content) is a Level A requirement — the most critical level — meaning it is a baseline that all websites must meet. Missing alt text is consistently in the top-3 most-cited WCAG violations in ADA web accessibility lawsuits.

Symptoms — what you'll see

If your site has this problem, you may observe any of the following:

• Screen readers announce "image" or the filename (e.g., "IMG_3847.jpg") instead of meaningful content
• Lighthouse accessibility audit shows "Image elements do not have [alt] attributes"
• WAVE reports red errors for missing alt attributes
• axe DevTools flags rule "image-alt" violations
• Product images have no description, leaving blind shoppers without product information
• Infographics and data charts convey no information to assistive technology users
• Logo and icon images are not identified to screen reader users

Common causes

• CMS default behavior: WordPress, Shopify, and other CMSs allow image uploads without requiring alt text
• Developers copy-pasting image HTML without adding alt attributes
• Design-to-code handoff tools (Figma plugins, etc.) that export HTML without alt text
• Images embedded via CSS background-image (which cannot have alt text — use <img> instead)
• Dynamically loaded images from third-party APIs that return URLs without associated descriptions
• Bulk image migration from old systems that didn't capture alt text data
• Assumptions that images are "decorative" when they actually convey content

How to fix it

1. 1Run the WAVE browser extension or Lighthouse on each page to generate a list of all images missing alt attributes.
2. 2For each informative image, write a concise alt text (under 125 characters) that describes its content or function in context.
3. 3For decorative images that add no information, set alt="" (empty string) — do NOT omit the alt attribute entirely.
4. 4For images that function as links or buttons, the alt text must describe the destination or action, not the image appearance.
5. 5For complex images (charts, graphs, infographics), provide a brief alt text plus a longer description via aria-describedby or a visible caption.
6. 6For images of text, alt text must include the same text shown in the image, or replace the image with actual HTML text.
7. 7Audit your CMS: ensure your image upload workflow prompts authors for alt text and does not allow uploads without it.

<!-- BROKEN: missing alt attribute -->
<img src="product-red-shoes.jpg">

<!-- BROKEN: empty alt on informative image -->
<img src="error-icon.png" alt="">

<!-- BROKEN: decorative image with alt text -->
<img src="divider-wave.svg" alt="decorative wave divider">

<!-- BROKEN: image link with no context -->
<a href="/cart"><img src="cart-icon.png"></a>

<!-- FIXED: descriptive alt text -->
<img src="product-red-shoes.jpg" alt="Women's running shoe in red with white sole">

<!-- FIXED: alt describes the error function -->
<img src="error-icon.png" alt="Error:">

<!-- FIXED: decorative image suppressed from screen readers -->
<img src="divider-wave.svg" alt="" role="presentation">

<!-- FIXED: image link describes destination -->
<a href="/cart"><img src="cart-icon.png" alt="View shopping cart"></a>

How to test your fix

After applying the fix, verify it works using these testing steps:

1. Run WAVE (wave.webaim.org) on your homepage and key landing pages — count red "Missing alt text" errors.
2. Open Chrome DevTools > Lighthouse > Accessibility — check the image-alt rule.
3. Install axe DevTools extension and scan each page type (home, product, blog, checkout).
4. Navigate your site with VoiceOver (Mac: Cmd+F5) or NVDA (Windows, free download) and listen to how images are announced.
5. In Chrome DevTools, open the Accessibility panel and inspect individual image nodes to see what alt text is exposed.
6. Check your sitemap/CMS to identify page types most likely to have images (product pages, blog posts, landing pages) and prioritize those.

Frequently asked questions