Back to Cookbook

Alt Text Express

Generate meaningful alt text for every image on your site

Writing alt text for dozens of images is slow, but leaving it out is worse. This recipe analyzes images in context and drafts purposeful alt text that supports accessibility first, with search benefits as a side effect rather than the main goal.

House RecipeWork2 min

INGREDIENTS

🌐Browser

PROMPT

Create a skill called "Alt Text Express". When I give you a website URL, a directory of images, or individual images with their page context, generate appropriate alt text for every image. Analyze both the image content and the surrounding page context (headings, nearby text, link destinations) to write purposeful alt text. Classify each image as: informative (needs descriptive alt), decorative (should have alt=""), functional (part of a link/button — describe the action), or complex (needs a long description via aria-describedby). For informative images, write concise, specific alt text (under 125 characters) that conveys the image's purpose on the page. For complex images (charts, infographics), flag them and suggest a long description approach. Output as a CSV (image URL, alt text, classification) and optionally generate the HTML with alt attributes applied.

How It Works

Point your Claw at a website URL, a directory of images, or a CMS, and

it generates alt text for every image. It uses both the image content and

the surrounding page context to write alt text that serves the right

purpose: informative for content images, empty for decorative ones,

functional for buttons and links.

What You Get

  • Alt text for every image on the site
  • Context-aware: uses surrounding text and page content to inform descriptions
  • Purpose-based: informative alt for content images, alt="" for decorative images, functional alt for linked images
  • Accessibility-first wording that stays natural and avoids keyword stuffing
  • Output as a spreadsheet (image URL → alt text) or directly injected into HTML
  • Flags images that are decorative and should have alt=""
  • Flags images that are too complex for alt text and need a longer description

Setup Steps

  1. Give your Claw a URL, image directory, or CMS connection
  2. Your Claw analyzes every image with its page context
  3. Review the generated alt text — adjust any that need domain-specific knowledge
  4. Apply to your site (copy-paste, code update, or CMS update)

Tips

  • Context matters more than the image alone — a photo of a person means different things on a team page vs. a testimonial
  • The decorative image detection saves time — you don't need alt text for background textures and dividers
  • Review especially for images with text in them — OCR helps but isn't perfect
  • Pair with Accessibility Sweep for a complete a11y pass
  • Re-run when new content is added to catch new images
Tags:#web-design#accessibility#alt-text#seo