FeaturesPricingAudit GuideFree StatementDashboard →

Fix Missing Alt Text on Images

Learn how to add descriptive alt text to images for accessibility. Includes code examples for HTML, React, WordPress, and Shopify.

6 min read
critical severityWCAG Level AWCAG 2.1 Success Criterion 1.1.1Manual review needed

What Is It?

Alt text (alternative text) is a brief description of an image that displays when the image cannot be loaded and is read aloud by screen readers. Every meaningful image must have descriptive alt text.

Affected users: Blind and low vision users, users on slow connections, search engine crawlers

Why It Matters

Blind and low vision users rely on alt text to understand images. Search engines also use alt text for image indexing. Missing alt text blocks entire user groups from accessing your content and hurts SEO.

How to Detect This Issue

Use automated tools to scan for images without alt attributes. Test with a screen reader. Check inspector element for <img> tags without alt attribute.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<img src="product-wallet.jpg">
After (accessible)
<img src="product-wallet.jpg" alt="Red leather wallet with zipper closure and card slots">

The alt text should be descriptive and convey the purpose of the image. For product images, include key details like color, material, and function.

React / Next.js

Before
<img src={product.image} />
After
<img src={product.image} alt={product.name} />

Always use dynamic alt text from your data. Even better: include descriptive details in a separate alt text field in your CMS.

WordPress

Before
Image inserted without Alt Text field filled
After
Alt Text field filled with "Red leather wallet with zipper closure and card slots"

In WordPress media library, fill the Alt Text field when uploading. This automatically adds the alt attribute to the <img> tag.

Shopify Liquid

Before
Product image with empty Alt text field in product editor
After
Product image with descriptive Alt text: 'Premium red leather wallet with multiple card compartments'

Shopify allows alt text editing per product image. Add descriptive text that explains what customers are seeing.

Common Mistakes

✗

Using file names as alt text (e.g., 'product_photo_2024.jpg')

✗

Alt text that's too long or includes keyword stuffing

✗

Writing 'image of' or 'picture of' at the start (screen readers already announce it's an image)

✗

Using alt text for decorative images (use alt="" instead)

✗

Not mentioning key product details like color, size, or material

Frequently Asked Questions

Should decorative images have alt text?
No. Decorative images should have an empty alt attribute: alt="". This tells screen readers to skip the image. A null alt attribute is different from a missing one.
How long should alt text be?
Keep it concise—typically under 125 characters. Write a sentence that describes what the image shows and its purpose on the page.
Should I include keywords in alt text?
Write naturally for humans first. If keywords fit naturally, include them, but never stuff keywords unnaturally. Alt text is for accessibility, not SEO gaming.
What about images with text in them?
Include the text content in your alt text. For example: <img alt="Sign reading: 'Sale: 50% off this weekend'" src="sign.jpg">

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides