DEV Community

Ryan Kramer
Ryan Kramer

Posted on

How to Write Alt Text with AI in 2026 (WCAG-Compliant Examples)

How to Write Alt Text with AI in 2026 (WCAG-Compliant Examples)

A few years ago an accessibility audit would mean a consultant manually writing alt text for every image on a site, billing $1-3 per image, and you'd hire them for two months. The work was tedious. The output was good. The cost made it the kind of thing that companies did once when threatened with a lawsuit and then never again.

In 2026 the same audit takes a fraction of the time. AI alt text generators write WCAG-compliant alt text from any image in seconds. The accessibility consultant is still valuable — but their job is no longer "type 4,000 alt text strings." It's "review and improve the AI-generated drafts on the 100 most important images, then ship the rest."

This post covers the practical side: what good alt text looks like, the rules that matter, how AI alt text generators actually work, and 12 worked examples (with the AI's first-pass output and what an accessibility editor would change).

What WCAG actually requires

WCAG 2.1 Level A, Success Criterion 1.1.1 (Non-text Content): "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

That's the rule. The interpretation:

  • Meaningful images need alt text that describes the image or its purpose.
  • Decorative images should have alt="" (empty alt). Don't omit the alt attribute — that's worse than empty.
  • Functional images (icons, buttons) need alt text describing the function, not the appearance. A search icon's alt text is "Search," not "Magnifying glass."
  • Complex images (charts, diagrams) need both short alt text and a longer description elsewhere on the page.
  • Images of text should generally be avoided; if unavoidable, the alt text should contain the text verbatim.

WCAG 2.2 added more nuance but the core requirement is the same. Most countries' accessibility laws (ADA in the US, EAA in the EU, AODA in Ontario, DDA in Australia) reference WCAG.

The rules that actually matter for AI alt text

Forget the academic version. Here's what to actually do:

1. Keep it under 125 characters. Screen readers cut off longer alt text. Search engines mostly ignore everything past the first sentence. Concise wins.

2. Don't start with "image of" or "picture of." Screen readers already announce that the user is on an image. Adding "image of" adds a syllable that wastes the reader's time. Just describe the content.

3. Be specific. "Red leather handbag with gold chain strap" beats "handbag." For SEO, specificity helps you rank. For accessibility, specificity helps the user form a mental picture.

4. End with a period. Treat alt text like a sentence. Screen readers use punctuation as cues for pause length.

5. Don't keyword-stuff. "Red leather handbag, designer handbag, luxury handbag" reads to both Google and screen readers as spam. One mention of the keyword is enough.

6. Match alt text to image purpose. If the image is in a "Sale" section, mentioning "on sale" in the alt text adds value. If the image is purely illustrative, describe what it shows.

7. For decorative images, use alt="". A horizontal rule, a decorative flourish, an aesthetic photo with no informational value — all should have empty alt text. AI generators always produce text — override their output for purely decorative images.

How AI alt text generators work

Modern AI alt text generators (like the PixelPanda AI alt text generator) use vision-language models. The model is trained on hundreds of millions of image-and-text pairs, until it can look at any image and write a sentence about it.

Under the hood:

  1. The image is uploaded and converted into a vector representation the model understands.
  2. The model is asked, in effect, "describe this image in one sentence under 125 characters, suitable for screen readers, no 'image of' prefix, no markdown."
  3. The model returns a sentence.
  4. The sentence is post-processed (length check, punctuation, decorator removal).
  5. You get a single string ready to paste into your alt attribute.

The whole process takes 4-8 seconds per image. Quality is good enough for production use on most images. For very specific or technical images, an accessibility editor may need to refine the output.

12 worked examples

Here's how a good AI alt text generator handles different image types, with the first-pass AI output and what an accessibility editor might change.

Example 1 — Product photo (red leather handbag)

Original image: Red leather handbag with gold chain strap, photographed on white background.

AI output: "Red leather handbag with gold chain strap and metal hardware on a white background."

Editor pass: Good. Maybe shorten to "Red leather handbag with gold chain strap on a white background." (104 chars).

Example 2 — Team photo

Original image: Group of 6 people standing in front of an office whiteboard.

AI output: "A group of six people standing together in front of a whiteboard in an office."

Editor pass: If this is the team page, add context: "The Acme team — six people standing in front of a whiteboard in the Brooklyn office." (95 chars).

Example 3 — Stock landscape

Original image: Mountain peak at sunrise with pink and orange sky.

AI output: "A mountain peak silhouetted against a pink and orange sunrise sky."

Editor pass: Good as-is. (66 chars).

Example 4 — Recipe photo

Original image: Bowl of pasta with red sauce and basil.

AI output: "A bowl of spaghetti with red marinara sauce, topped with fresh basil leaves."

Editor pass: If this is on a recipe page for "Spaghetti Marinara," add: "Finished spaghetti marinara in a white bowl, garnished with basil." (66 chars).

Example 5 — Infographic

Original image: Bar chart showing quarterly sales growth.

AI output: "A bar chart showing quarterly sales numbers from Q1 to Q4 with an upward trend."

Editor pass: For accessibility this needs more — short alt + longer description in <figcaption> or adjacent text. Short alt: "Bar chart: quarterly sales rose from $1.2M in Q1 to $2.8M in Q4." (66 chars).

Example 6 — Icon (search icon)

Original image: Magnifying glass icon used as a search button.

AI output: "A magnifying glass icon."

Editor pass: This is functional. Override: "Search." (8 chars).

Example 7 — Decorative flourish

Original image: A decorative ornamental swirl above a section header.

AI output: "A decorative swirl design."

Editor pass: Override to empty: alt="".

Example 8 — Headshot (LinkedIn-style)

Original image: Professional headshot of a smiling woman in business attire.

AI output: "A smiling woman wearing a navy blazer."

Editor pass: If this is the about-page photo for Jane Smith: "Jane Smith, smiling, wearing a navy blazer." (45 chars).

Example 9 — Screenshot of an app

Original image: Screenshot of the Stripe dashboard showing a recent payment.

AI output: "A screenshot of a payment dashboard showing a recent transaction of $99."

Editor pass: If this is in a tutorial: "Stripe dashboard showing a successful $99 payment from a customer." (66 chars).

Example 10 — Meme

Original image: Image macro with text reading "I should be coding."

AI output: "An image macro of a tired-looking person at a desk with the caption 'I should be coding.'"

Editor pass: Good. Maybe trim: "Meme: tired person at a desk, caption reads 'I should be coding.'" (66 chars).

Example 11 — Before/after photo

Original image: Side-by-side before/after of a renovated kitchen.

AI output: "Side-by-side comparison: a dated kitchen on the left and a renovated modern kitchen on the right."

Editor pass: Good as-is (98 chars).

Example 12 — Product variant swatch

Original image: Small color swatch showing burgundy fabric.

AI output: "A swatch of burgundy-colored fabric."

Editor pass: For an ecommerce variant: "Burgundy color variant." (24 chars).

Patterns from the examples

A few things to notice:

  • AI output is consistently good but generic. It describes what's visually there. It doesn't know context — that this is the product photo for a specific SKU, that this image is functional rather than decorative, that this person is named Jane Smith.
  • The editor pass adds context, not detail. The AI usually describes the image accurately enough; the human's job is to add the surrounding context that makes the alt text serve the page purpose.
  • Decorative and functional images need human override. AI always produces text. For decorative (alt="") or functional ("Search" not "magnifying glass icon") use cases, you have to override.
  • Complex images need supplementary description. Charts, infographics, technical diagrams — the alt text alone isn't enough. AI gives you the alt text; you also need a longer description nearby.

Workflow for accessibility audits

If you're doing an accessibility audit on an existing site:

Step 1. Crawl the site. Tools like Sitebulb or Screaming Frog will export every image URL plus its current alt attribute.

Step 2. Filter for images with empty, missing, or generic alt text. This is your retrofit list.

Step 3. For images on high-traffic pages, run them through an AI image description tool tuned for accessibility. Get first-pass alt text for all of them.

Step 4. Editor pass on the top 50-100 images. Apply the patterns above — add context, override functional/decorative images, supplement complex images with longer descriptions.

Step 5. Bulk-update via your CMS's media import or asset management tools.

Step 6. Re-audit with axe, WAVE, or Lighthouse to confirm coverage.

For a 1,000-image site this is two days of work where it used to be two weeks. For a 10,000-image site it's a week where it used to be three months. The bottleneck is no longer the writing — it's the editorial review and the CMS update.

What about generic image-of-the-page alt text?

Some sites generate alt text dynamically — "Photo on Smith's blog post 'How to Build a Birdhouse.'" This is technically alt text but it's useless. It tells a screen-reader user nothing about what's actually in the image.

Use AI to generate real, content-specific alt text. The general-purpose AI Image Describer handles any image type and returns a describer's-eye summary plus a screen-reader-ready alt text in one pass. For purely accessibility work, the accessibility-tuned page framing is more aligned with audit workflows.

What WCAG doesn't require but you should still do

A few things WCAG doesn't strictly require but that improve accessibility outcomes:

  • Captions visible on the page — they help everyone, not just screen-reader users.
  • Title attributes — generally redundant with alt text, but some screen readers do read them.
  • ARIA roles and labels for complex interactive images — especially for charts that users interact with.
  • High color contrast — alt text describes the image but visual contrast helps low-vision users see the image directly.
  • Don't auto-play videos with sound — for screen-reader users, sudden sound is disorienting.

These are good practice. They don't show up on automated checkers but they meaningfully improve the experience for users with disabilities.

Bottom line

The economics of accessibility have changed in 2026. Alt text used to be the most-skipped accessibility feature because writing it by hand for every image was impractical. AI alt text generators have removed that bottleneck. WCAG-compliant alt text on every image is now achievable for any site, regardless of size.

If you've been putting off an accessibility audit because the alt text retrofit looked impossibly large, this is the year to do it. The tools are good enough. The cost is low enough. The legal and reputational risk of not doing it is higher than ever.

Pick a day. Run an audit. Generate the first-pass alt text. Spend a few hours editing the top 100. Ship it. Your screen-reader users — and the people considering suing you over your inaccessibility — will thank you.

Top comments (0)