Alt Text: How to Write Image Descriptions for Accessibility and SEO (With Examples)

Alt text is one of the smallest things on a web page and one of the most neglected. In WebAIM's 2026 analysis of the top one million home pages, 53.1% had images with missing alternative text, and 16.2% of all home page images had none at all. That's a lot of content that screen reader users can't access and that search engines have to guess about.

The fix is simple, but writing alt text well takes a little thought. This guide covers what alt text is, why it matters for accessibility and SEO, how to write it with plenty of before and after examples, when to leave it empty, and how to find every image that's missing it.

What is alt text?#

Alt text (short for alternative text) is a short written description of an image, added with the alt attribute on the <img> tag:

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch in the grass">

Visitors don't usually see it. It's used in three situations:

• Screen readers read it aloud to people who are blind or have low vision.
• Browsers show it in place of the image when the image fails to load or images are turned off.
• Search engines use it to understand what the image shows and how it relates to the page.

Why alt text matters#

Accessibility comes first#

Alt text exists so that everyone can get the same information from a page. It's a requirement of the Web Content Accessibility Guidelines: success criterion 1.1.1 Non-text Content (Level A, the most basic level) says all non-text content needs a text alternative that serves the same purpose, with exceptions such as purely decorative images. Many accessibility laws and policies point to WCAG, so missing alt text is also a compliance risk.

Image SEO and Google Images#

Google's image SEO documentation calls alt text "the most important attribute when it comes to providing more metadata for an image". Google uses it along with computer vision and the content of the page to understand what an image is about, which helps your images appear in Google Images and image results. When an image is a link, its alt text also works like anchor text, telling Google what the linked page is about.

When images break#

If an image fails to load, the alt text appears in its place. A broken "Buy now" image with good alt text still tells people what to click.

How to write good alt text#

The W3C's guidance boils down to one question: what would you say about this image if you were reading the page aloud to someone who couldn't see it? Then write that, in context.

1. Describe what matters in this context. The same photo needs different alt text on a recipe page and on a photographer's portfolio.
2. Be specific and concise. Usually one short sentence, often under about 125 characters. Some screen readers handle long alt text awkwardly, so put long descriptions in the page text instead.
3. Don't start with "image of" or "picture of". Screen readers already announce that it's an image.
4. Include a keyword only if it fits naturally. Describe the image first; if the image genuinely shows the thing your page is about, the keyword will appear on its own.
5. Include text that's in the image. If an image contains words, like a sign or a promotional banner, the alt text should include them.
6. End with a period. It makes many screen readers pause naturally.

Before and after examples#

Functional images: describe the action#

When an image is a link or a button, the alt text should describe what happens when you click it, not what the picture looks like. A magnifying glass icon on a search button is "Search", not "magnifying glass". A logo that links home is usually your brand name plus "home".

Charts and complex images: summarize, then explain nearby#

For charts, infographics and diagrams, give the main takeaway in the alt text and put the full data or explanation in the surrounding text or a table. That way everyone gets the details, not only screen reader users.

Decorative images: use an empty alt#

Some images add nothing but visual style: background flourishes, divider lines, icons next to text that already says the same thing. For these, use an empty alt attribute, alt="", so screen readers skip them.

Empty is not the same as missing. If the alt attribute is missing completely, many screen readers read out the file name instead, which is worse than silence.

What not to do#

• Keyword stuffing. Google gives this exact example of what to avoid: alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food". Google says it creates a negative user experience and may cause your site to be seen as spam.
• File names. DSC_0042.jpg or hero-final-v3 tell nobody anything.
• Redundancy. Repeating the caption or the sentence right next to the image word for word.
• Being too vague. "Product", "photo", "graphic" and "image" are barely better than nothing.
• Missing alt on linked images. A linked image with no alt text leaves screen reader users with a link that has no name.

Alt text vs title attribute vs caption vs file name#

How to add alt text#

WordPress. In the block editor, select the image and fill in Alternative text in the block settings sidebar. You can also set it in the Media Library by opening an image and filling in the "Alternative Text" field. Alt text added in the block editor applies to that use of the image, so check both when you edit older posts.

Shopify. In the admin, open a product, click an image in the media section and add the alt text in the image details. For images in themes and pages, look for an "image description" or "alt text" field in the theme editor or the rich text editor's image settings.

HTML. Add the alt attribute to the <img> tag, as in the examples above. For inline SVG, Google's documentation suggests using a <title> element inside the SVG to describe it.

How to find images missing alt text#

Checking one page by hand is easy: view the source and search for <img. Checking a whole site needs tools.

• MyKavo's Site Audit crawls your site and flags "Images missing alt text" as a warning on every page where an image has no alt attribute, with the count of affected images, such as "3 of 12". It deliberately doesn't flag alt="", because an empty alt is correct for decorative images. The same audit also flags broken images and images missing width and height.
• Lighthouse (in Chrome DevTools) includes an accessibility check for image elements without alt attributes.
• Accessibility browser extensions like WAVE or axe DevTools highlight every image and its alt text right on the page.

Prioritize images that carry information: product photos, charts, buttons and linked images first, then photos in your most visited articles. For the rest of your on-page checks, our on-page SEO checklist and website audit guide cover the full list.

Keep it from slipping#

Alt text breaks the same way everything else on a website does: quietly. A theme update stops outputting alt text from the Media Library, a new page builder strips it, a bulk product import arrives with none. Run your audit again after redesigns, theme changes and big imports, and make "alt text filled in" part of the checklist for every new page and product.

The bottom line#

Alt text makes your images usable for people who can't see them and understandable for search engines. Describe what matters about each image in context, keep it short and specific, describe the action for links and buttons, use alt="" for decoration, and never stuff it with keywords. Then audit your whole site, because missing alt text is one of the most common accessibility failures on the web.

Check a page's on-page basics with the free Meta Tag Checker, then start free with MyKavo to run a Site Audit that lists every image missing alt text.