How to Write Alt Text: The 2026 SEO & Accessibility Guide

Most pages with images have alt text that's wrong. Either it's missing entirely (a WCAG 2.2 failure), it's keyword-stuffed (which Google now actively discounts), or it just describes the file ("IMG_2034.jpg") instead of the image.

This guide fixes that. You'll learn how to write alt text that actually serves the three jobs alt text is supposed to do — accessibility, fallback display, and image SEO — without falling into any of the traps that hurt one of those goals to help another.

It's written for marketers, SEO practitioners, and content writers who manage image-heavy sites. By the end you'll have a clear rule for every image you publish: include alt text, leave it empty, or rewrite it.

What is alt text?

Alt text (short for alternative text) is a written description of an image, set via the HTML alt attribute. Screen readers announce it to blind and low-vision users, browsers display it when an image fails to load, and search engines use it to understand image content for ranking and image-search indexing. Missing alt text on a non-decorative image is one of the most common WCAG 2.2 violations (Success Criterion 1.1.1 Non-text Content).

Here's the markup:

<img src="/photos/barista.jpg"
     alt="Barista hands a latte to a customer at a wooden cafe counter, morning light from the window">

That single attribute is doing accessibility work, SEO work, and resilience work simultaneously. When you write it well, all three benefit. When you write it badly, all three lose at once.

Why does alt text matter?

Three concrete reasons, each measurable.

1. Accessibility (WCAG 2.2 Level A)

Around 285 million people worldwide live with some form of visual impairment. Most rely on screen readers (JAWS, NVDA, VoiceOver, TalkBack) that announce alt text aloud. If an image is decorative, screen readers should skip it. If it's informative, screen readers should describe it. Without alt text, screen readers either announce the filename ("IMG underscore 2034 dot jpg") — which is useless — or stay silent, leaving the user wondering what they missed.

WCAG 2.2 Success Criterion 1.1.1 makes this a Level A requirement: every non-text content element needs a text alternative. Skipping it isn't just unkind, it's legally risky in jurisdictions with accessibility regulations (ADA Title III in the US, EN 301 549 in the EU, Section 508 for federal contracts).

2. SEO (image search + page relevance)

Google reads alt text to understand what each image is about. That feeds two ranking signals: Google Images discoverability (where bolded keywords boost click-through) and page-level topical relevance (alt text is one signal among many that helps Google understand what the page is about).

A page selling "Bangalore specialty coffee" benefits when every image is described in language that supports that topic. A page with alt="" on every image is leaving relevance signals on the table.

3. Resilience

Slow connections, blocked CDNs, content-security-policy strip, mobile data caps, corporate firewalls — there are dozens of reasons an image might not load for a real user. When that happens, the browser displays the alt text in place of the broken image. Good alt text turns a broken image into context. Empty or missing alt text turns it into a broken layout with a tiny placeholder icon.

How long should alt text be?

Keep alt text under 125 characters. Most major screen readers truncate at that length. JAWS and NVDA cut off around 125-150 characters in default settings; longer alt text becomes tiring to listen to and risks getting trimmed mid-sentence.

That's the upper limit. The right length depends on the image:

If your image genuinely needs more than 125 characters to describe (a flowchart, a complex infographic, a data visualization), put a short alt text on the image and provide the full description in nearby body text or a figcaption. Then use aria-describedby to link them.

Need help generating alt text that respects these limits without keyword-stuffing? Our free AI Alt Text Generator produces WCAG-compliant alt text in three lengths — a recommended version under 125 characters, a shorter version under 80 for tight layouts, and a longer version up to the limit for complex images. It naturally weaves in your page keyword when relevant, without overstuffing.

What's the difference between decorative and informative images?

Every image on your page belongs in one of these two buckets. Getting the distinction right is the single biggest leverage point for both accessibility and SEO.

Decorative images

Decorative images add visual interest but no information. Examples:

• A subtle pattern in a section background
• A horizontal divider line drawn with an SVG
• A stock photo of "happy team" next to a paragraph about company culture (the paragraph already conveys everything the photo conveys)
• Icons that repeat text already adjacent to them (a 🔍 next to the word "Search")

For decorative images, use empty alt text, not missing alt text:

<!-- Correct: decorative image -->
<img src="/decor/divider.svg" alt="" role="presentation">

<!-- Wrong: missing alt — screen readers will announce the filename -->
<img src="/decor/divider.svg">

<!-- Also wrong: pointless description that screen readers will read aloud for no reason -->
<img src="/decor/divider.svg" alt="Decorative horizontal divider">

The empty alt="" tells screen readers "intentionally blank, skip me." Missing alt entirely means "I don't know what to do" — and screen readers fall back to announcing filenames.

Informative images

Informative images carry meaning that isn't in the surrounding text. Examples:

• A product photo on an e-commerce page
• A chart showing sales by quarter
• A screenshot of a UI element being explained
• A photo whose subject matters to the article (a portrait in a profile piece)

For informative images, alt text should describe what the image conveys, not what the image visually contains. The test: if a sighted user lost the image, what context would they lose with it?

<!-- Good: describes what matters about the image -->
<img src="/charts/q3-sales.png" alt="Q3 sales grew 41% over Q2, driven mainly by enterprise tier upgrades">

<!-- Bad: technically describes the image but loses the point -->
<img src="/charts/q3-sales.png" alt="A bar chart with three blue bars and one taller green bar">

How do you write alt text that ranks for SEO?

Five principles, in priority order.

1. Describe the image, then check if your keyword fits. Not the other way around. Reverse-fitting a keyword into alt text usually produces awkward text that screen readers stumble on and Google now actively discounts.

2. Lead with the visual subject, not the metadata. "Smiling barista handing a latte..." not "Image of a smiling barista...". Screen readers already announce "image" before reading the alt text — saying it again is redundant.

3. Be specific. "Wooden cafe counter, morning light from the window" beats "interior of a coffee shop". Specificity helps both SEO (more long-tail keyword matches) and human readers (better mental picture).

4. Match the surrounding tone. A formal report uses formal alt text. A casual blog can use casual alt text. The transition from body copy to alt text shouldn't feel like a different voice.

5. Avoid the spam triggers. Repeating the same keyword across every image on a page, stuffing 5-6 keywords into one alt attribute, or using alt text to manipulate search ranking via hidden content all hurt rankings. Google's image AI is good enough that it can verify alt text against the actual pixels — fake alt text gets you penalized faster than no alt text.

6 alt text examples: good vs bad

The fastest way to get this right is to see paired examples. Each row is the same image with two different alt texts:

Notice the pattern. The "good" version describes what matters about the image in the context of the page. The "bad" version either describes nothing (just labels the image type) or overdescribes (stuffing keywords, adding pointless adjectives).

How can AI tools help write alt text?

Writing 50-200 alt texts for a single content publish is tedious, which is why most teams either skip it, batch it badly at the end, or accept whatever default a CMS provides. AI tools can compress that work from hours to minutes — if you use them correctly.

The right workflow:

1. Describe what's in the image in 1-2 sentences yourself (e.g., "Smiling barista handing a latte to a customer at a wooden cafe counter, morning light from the window").
2. Add the page topic or target keyword as optional context ("specialty coffee shop in Bangalore").
3. Let the AI generate three variants and pick the one that best fits.

InsiteChat's AI Alt Text Generator does exactly this — and it enforces the WCAG 125-character limit, avoids "image of" prefixes, only weaves in keywords when they actually fit, and returns three length options so you can match tight layouts (mobile, OG cards) or longer needs (complex charts).

What AI tools don't do well yet: looking at the image directly and describing what's in it without your text input. Some image-recognition tools exist, but they often miss visual nuance, get sentiment wrong, and over-describe. The hybrid approach — your 1-sentence description + AI's polishing into WCAG-compliant text — beats either pure-AI or pure-manual workflows on both quality and speed.

What about alt text for AI search and answer engines?

This is the newest layer. AI answer engines like ChatGPT, Claude, Perplexity, and Google AI Overviews increasingly cite web content in their responses — and alt text is part of how they understand image-rich pages. If your alt text is good, an AI assistant summarizing the topic might cite your page or reference your image; if it's bad or missing, the AI skips you.

This overlaps heavily with AEO (Answer Engine Optimization). If you want to measure how well your site is built for AI citation, our free AEO Score tool audits nine cite-ability signals including alt text completeness. Pair it with our LLM-Friendly Website Score which audits the technical signals (robots.txt rules for GPTBot, ClaudeBot, PerplexityBot; SSR vs JS rendering; semantic HTML).

The same alt-text principles that win for accessibility win for AEO: be specific, describe what matters, avoid keyword stuffing, write naturally. There's no special "AI alt text" — there's just good alt text, and AI assistants prefer it for the same reasons humans do.

FAQ

What is the maximum length for alt text?

There's no hard maximum enforced by browsers or HTML, but 125 characters is the practical limit for screen readers (JAWS and NVDA truncate around 125-150 chars in default settings). For images that need more description than that — diagrams, infographics, dense charts — use short alt text on the image and put the long description in a nearby figcaption or paragraph, linked via aria-describedby.

Should I use alt text for decorative images?

Yes, but it should be empty (alt=""), not missing entirely. Empty alt tells screen readers "intentionally blank, skip me." Missing alt makes screen readers fall back to announcing the filename, which is worse. For purely decorative images, also add role="presentation" for extra clarity.

Does alt text affect SEO rankings directly?

Indirectly. Alt text is one of many signals Google uses to understand image content for Google Image search and to assess page-level topical relevance. It's not a strong ranking factor on its own, but consistent, accurate alt text across an image-heavy page demonstrably improves image-search visibility and supports the page's overall topical relevance.

How do I write alt text for product images on Shopify or WooCommerce?

For e-commerce product images, the recommended pattern is: Brand + product type + key attribute. Example: "Apple MacBook Pro 16-inch in space grey, open and showing the keyboard." Avoid SKUs ("MBP-16-SG-2024") — those are useful for inventory, useless for shoppers and screen readers. Use the AI Alt Text Generator with your product name + key attributes as the input.

What's the difference between alt text and a title attribute?

The alt attribute is alternative text shown when the image fails or read by screen readers. The title attribute is tooltip text shown on mouse hover. They serve different purposes and should not contain the same text. Most images need alt only. title is rarely useful and is often ignored on mobile (no hover).

Does keyword-stuffing alt text help SEO?

No, it actively hurts SEO. Google's image recognition is sophisticated enough to verify alt text against the actual image content. Keyword-stuffed alt text ("AI chatbot, AI bot, chatbot software, AI assistant, conversational AI") gets discounted or flagged. It also hurts accessibility — screen reader users hear a string of disconnected keywords instead of useful description.

How do I add alt text in HTML, React, Next.js, and WordPress?

In raw HTML: <img src="..." alt="...">. In React: <img src="..." alt="..." />. In Next.js with the next/image component: <Image src="..." alt="..." width={...} height={...} />. In WordPress, every image upload has an "Alt Text" field in the media library — fill it on upload, not as an afterthought. Some plugins offer bulk alt-text editing for existing images.

Can AI tools write better alt text than humans?

For most images, AI tools are at least as good as a tired human typing the same alt text for the 50th image of the day, and they consistently enforce length limits and avoid common mistakes. For nuanced editorial images or images that require knowing the page's exact intent, a human writer with a quick AI pass usually wins. The combination — human describes the image, AI polishes into WCAG-compliant alt text — beats either approach alone.

The short version

If you skim everything above and remember three things, remember these:

1. Empty alt is correct for decorative images (alt=""), missing alt is not
2. Keep informative alt text under 125 characters and describe what matters, not what's visually present
3. Don't stuff keywords — Google and screen readers both penalize it

When in doubt, our AI Alt Text Generator does this for free in seconds. Three variants per request, all WCAG-compliant, no signup. Pair it with the AI Meta Description Generator and your image-heavy pages will be more accessible and rank better in both Google Image search and AI answer engines.