Image Alt Text: How to Write, Check and Fix It

What Is Image Alt Text?

Think of it as a line of words that stands in for a picture when the picture cannot be seen. You write it in the alt attribute of an img element, and it works as the image description for anyone or anything that cannot use pixels. The smallest correct markup looks like this.

<img src="/images/kettle.jpg" alt="Red enamel kettle on a gas hob">

Three kinds of reader depend on it. Visually impaired users with assistive technology such as JAWS, NVDA, VoiceOver or TalkBack hear the text where a sighted visitor sees the picture. Visitors on a weak connection see the words in the empty frame. Search engines are the third reader: image search weighs the alt text next to the file name and the copy around the picture.

The vocabulary is messy. Alt text, alt attribute and alternative text mean the same thing, while "alt tag" is the loose name, since alt is an attribute of the img tag and not a tag of its own. HTML expects it on every img element, with narrow exceptions. The MDN img element reference covers the useful values and what an empty one signals.

Alt text, caption, title attribute and file name

These four get mixed up, and only one is read by our check. The title attribute is just a hover tooltip, so it cannot stand in for alt.

A caption is visible to everyone, while alt text serves people who cannot see the picture, so neither should repeat the other. If the caption says "Our new copper kettle", the alt can describe the color, the shape and the setting.

Why Image Alt Text Matters for SEO and Accessibility

Web accessibility comes first. WCAG 1.1.1, Non-text Content, is a Level A success criterion that asks for a text alternative on any image that carries meaning. Rules such as Section 508 in the United States and the European Accessibility Act lean on WCAG based standards, and ADA compliance discussions use it as a yardstick too. Ask a legal adviser what applies to you. The practical test is simple: if an image tells sighted visitors something, blind visitors need it in words.

Search is the second reason, and it deserves modest expectations. According to the Google image SEO guidance, Google uses alt text together with computer vision and the content of the page to understand an image. That supports Google Images results, which matters most for pages where the picture is the attraction, such as ecommerce product images and recipes.

Linked images add a third use. When an image is the only content of a link, its alt text acts as the anchor text for that link, so a blank value leaves the link without a description. Alt text is also what the visitor sees when the file is slow, blocked or broken.

Keep the claim honest, though. It is a relevance and accessibility basic, not a ranking trick, and a missing alt attribute is among the most frequent findings in audits, as our roundup of common issues found in site checks shows.

How SEO Site Checker Tests Image Alt Text

Here is what our report does today, so you can predict the result before you run it. It counts img elements and checks one attribute on each.

The exact rule: Our report flags an img element when its alt attribute is missing, empty or made up only of spaces. It never judges the wording, so a page where every image says alt="image" passes. If nothing is flagged, or the page has no images, the row shows a green pass. Otherwise it shows an amber warning, and this check never shows a red failure.

A headless Chromium browser opens your URL, waits for the load event and takes the rendered HTML. Images your scripts add before load are included, and natively lazy loaded images count because the img element is already there. Images inserted well after load, such as infinite scroll batches, are usually missed.

Counting happens one element at a time, so duplicates, hidden images, tiny tracking pixels and copies inside noscript blocks all add up. Inline SVG graphics, any CSS background image, input elements of type image and the source elements inside a picture element are not counted, although the img inside a picture is.

When something is flagged, the missing alt text warning states how many img tags the page uses and how many are empty or missing. It lists each flagged address, and you may need to sign in to see that list. A warning adds no points to the SEO report score, so fixing the images moves it up.

What passes and what is flagged

This table shows what the code does today, not what would be ideal.

The decorative image catch

An empty alt is the correct markup for a purely decorative image, because it tells a screen reader to skip the picture. Our check still counts it as missing, since it cannot tell decoration from a description you forgot.

You have two options. Accept the warning when every flagged image is decoration, or move the decoration into a CSS background, which the check does not count. The check reads only the alt attribute, so aria-hidden, aria-label or role="presentation" on an img will not clear the warning.

Why the count can look higher than you expect

Plugins and themes often print an image twice, once normally and once in a noscript fallback, and each copy adds to the count. Ad and analytics pixels are images too. Compare the list with the page source before you blame your content photos.

Check my site free

How to Check Image Alt Text on Any Page

Four methods show which images lack alt text, from the quickest to the most technical.

1. Run the free report. Open the image alt text row and read the list of flagged addresses.
2. Inspect one image. Right click the picture, choose Inspect and read the alt attribute in the highlighted line of Chrome DevTools.
3. Use the console. Paste the snippet below to list every image whose alt is blank, with its address.
4. Cross check with Lighthouse. Its accessibility audit accepts an empty alt, so its list can be shorter than ours.

Tip: Turn images off in your browser, or listen to the page once with a screen reader, to hear how it really sounds.

Console snippet that matches our rule

The snippet trims each alt value and flags blanks, mirroring our rule.

const blank = [...document.images].filter(img => (img.getAttribute('alt') || '').trim() === '');
console.log(blank.length + ' of ' + document.images.length + ' images have a missing or blank alt');
console.table(blank.map(img => img.currentSrc || img.src));

Expect the number to differ from the report now and then. The snippet reads the live page, where noscript contents are plain text rather than elements, and it may include images that loaded after the report took its snapshot.

How to Add Image Alt Text, Step by Step

This routine works on any site because it sorts each flagged image by its job before you write a word.

1. Sort the images. Mark each as an informative image (it adds meaning), a functional image (it sits inside a link or button) or decorative (it adds only looks).
2. Describe content images. Write one specific sentence about what the picture shows and why it is on this page.
3. Name the action for functional images. Say where the link goes or what the button does, for example "Download the price list", not what the picture looks like.
4. Handle decoration. Prefer a CSS background so no empty alt is needed. If it must stay an img element, keep alt="" as the decorative image catch above describes.
5. Edit at the source. Change the media entry, the theme template or the HTML file, not one copy of the page. Clear your caches and republish.
6. Run the report again. Confirm the flagged count drops to zero, or to the number of decorative images you chose to keep.

Plain HTML before and after

The block has four lines: a missing alt, a fixed content image, a linked logo with a functional description, and a decorative image with an empty alt.

<img src="/img/team.jpg">
<img src="/img/team.jpg" alt="Five staff members laughing around a meeting table">
<a href="/"><img src="/img/logo.svg" alt="Northwind Coffee home page"></a>
<img src="/img/divider.png" alt="">

Only the first line is a real defect. The fourth is correct markup that our check still counts.

Images added by templates or JavaScript

Make a template read the alt text from a field and fall back to something sensible, such as the product title, instead of printing nothing. Images built in script need the alt property set before they are appended to the page. Responsive images with srcset use the alt of their img element, so you write it once.

Add Image Alt Text in WordPress, Shopify and Wix

Every popular builder has an alt field, but each hides it somewhere different. Bulk alt text tools can pre fill from file names or AI, so treat that output as a draft. Shop owners should give product images the most care, and our ecommerce SEO checklist covers the wider product page context.

WordPress

Select the image block and open the block settings sidebar. Type into Alternative text, or tick Mark as decorative for an empty alt. The WordPress media library field only sets the default for later inserts, so check older posts one by one.

Shopify

Open the product, select the media item and add the alt text. Banner and section images are edited in the theme editor, and the exact control depends on your theme. In a template, print the stored value with the escape filter.

<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt | escape }}">

Wix

Select the image in the editor, open its Settings and fill the field called What's in the image? Check any picture you reuse on several pages, because the text may not carry over to every placement.

How to Write Good Image Alt Text

These rules take about ten seconds per image once they become habit.

• Describe the image for this page. Imagine reading the page aloud to a friend over the phone.
• Keep it short. One sentence is plenty, and 125 characters is a sensible length. HTML sets no hard limit.
• Skip "image of" and "picture of". Screen readers already announce an image.
• Be specific. Name the object, color and action. If the image contains text, repeat it exactly.
• Use a keyword only when it truly describes the picture. Repeating one reads badly and gains nothing.
• Do not copy the caption. A complex image such as a chart gets a short alt plus a full description in the page text.

Weak and strong alt text side by side

Each row pairs a common weak habit with a version a listener would want to hear.

Image Alt Text Examples by Image Type

The right alt text for images depends on the job each one does. Use the table as a start, and run doubtful pictures through the W3C alt text decision tree.

If you only have a picture of text and no source file, the Image to Text Converter can pull the words out so you can copy them accurately.

Common Image Alt Text Mistakes to Avoid

Most habits below pass our check, yet they still let down visitors.

Keyword stuffing: A string of repeated search phrases reads badly to a listener and looks spammy to a search engine. Describe the picture first, and let a keyword appear only when it is a true description.

• File names as alt text. A value such as IMG_4021.jpg often arrives when a bulk tool fills the field.
• One value everywhere. The same text, or the single word image, on every picture passes the check and still fails the visitor.
• Relying on the title attribute. A tooltip appears only on mouse hover, and screen readers do not treat it as a replacement for alt, so touch and keyboard visitors may never see it.
• Long text on decorative images. A paragraph describing a background swirl makes a screen reader talk about nothing, so cut it to an empty alt or a CSS background.
• Forgotten third party images. A review widget may print its star icons as img tags with no alt at all. A slider plugin can output every slide image without alt unless the caption field is filled in, and you only see it in the rendered page.