How to Fix Missing Alt Text on Images

Alt text is a short written description of an image, added to the image's HTML. People who use screen readers hear it read aloud, search engines use it to understand what the image shows, and browsers display it when an image fails to load. Missing alt text is one of the most common issues in a website audit, and one of the quickest to fix.

What alt text looks like

It sits in the alt attribute of an image:

<img src="oak-table.jpg" alt="Solid oak dining table with six matching chairs" />

You won't see it on the page. In most website builders and CMSs you add it in an "alternative text" box when you upload or select the image.

Why alt text matters

Accessibility

Blind and partially sighted visitors use screen readers that read the page aloud. Without a description, an image is either skipped or announced as a file name like "IMG_4021.jpg". For images that carry information, such as a product photo, a chart or a button, that information is simply lost.

Search

Google can't see an image the way a person does. The alt attribute, along with the text around the image, helps it understand what the image shows. That helps the image appear in Google Images and adds context to the page.

When images don't load

On a slow connection, or if a file goes missing, the browser shows the description in place of the image, so visitors still know what should be there.

How to find images that need fixing

Run an audit and look for these issues in the list:

• Images: Missing Alt Attribute: the image has no alt at all. Always fix these.
• Images: Missing Alt Text: the image has an empty alt="". That's correct for purely decorative images, so check each one and add a description only where the image carries meaning.
• Images: Alt Text Over 100 Characters: the description is long and tiring to listen to.

You can run a free audit here to see every affected image on your site.

How to write a good description

1. Describe what matters in this context. A photo on a product page needs the product details. The same photo in a blog post about a room makeover might need the style instead.
2. Be specific and brief. Usually one short sentence, ideally under 100 characters.
3. Don't start with "image of" or "picture of". Screen readers already announce that it's an image.
4. Describe the purpose of linked images and buttons. If an image is a link or button, describe where it goes or what it does, such as "Search" or "Back to home".
5. Include text that appears in the image. If an image contains words, like a banner or an infographic, include them.
6. Use keywords only where they fit naturally. Stuffing keywords into image descriptions doesn't help, and it makes life harder for screen reader users.

Examples

When to leave it empty

Some images are purely decorative: background patterns, dividers or a stock photo that adds nothing to the text. For these, use an empty alt attribute, alt="", so screen readers skip them. Don't leave the attribute out completely, because some screen readers will then read the file name instead.

Fixing it in common platforms

• WordPress: open Media, select the image and fill in "Alternative Text". Changes in the media library may not update images already placed in posts, so check those too.
• Shopify: open the product, click the image and choose "Add alt text".
• Squarespace and Wix: click the image in the editor and look for the alternative text or "What's in the image?" field in its settings.

Google's guide to image SEO best practices covers this and other ways to help your images appear in search.

Check your work

Start with the images that matter most: products, services and anything that's a link or a button. Then run your audit again. The Images: Missing Alt Attribute count should fall to zero, and anything left under Missing Alt Text should be decorative images you've chosen to leave empty.