Screenshot alt text accessibility auditor for WCAG 2.2 compliance
Build a web accessibility auditor that checks a website's screenshot captions against WCAG 2.2. The goal: screenshots often ship with missing, placeholder, or useless alt text, which is invisible to screen-reader users and a direct accessibility failure. This tool finds those problems automatically and suggests fixes. Trigger it with a web page (route) where a visitor enters any website URL and a crawl depth, then sees results inline — keep it space-authenticated, not public. Back the page with an API route the page calls. At a high level: - Crawl the given site breadth-first, staying on the same host, up to the requested number of pages. - Extract screenshot-like images along with their alt text and captions. - Classify and judge each image with a vision model — first confirm it's genuinely a software/UI screenshot (drop logos, icons, headshots, stock photos, illustrations, charts), then evaluate the caption against WCAG 2.2: fail missing/placeholder/too-short alt deterministically, and use the model to check accuracy and sufficiency for the rest. - Present results as cards showing the image, the page it appears on, current alt text, a pass/fail verdict with severity, the reason, and a suggested better alt text, with filters for all/failing/passing. Keep it read-only — crawl and report, no writes to external systems. Use Anthropic Claude vision for the classification and judging — or whichever LLM vision provider your team prefers. Tools used: 3B React step, Anthropic API (Claude vision, via connector)
What this prompt builds
Caption Accessibility Auditor crawls a website to identify screenshots with missing, placeholder, or insufficient alt text that violate WCAG 2. 2 accessibility standards. It uses Claude vision to classify images, evaluate captions against compliance criteria, and generate concrete remediation suggestions.
The problem
Product marketing sites and documentation rely heavily on screenshots to illustrate features and workflows, but their alt text is routinely missing, generic ("image.png"), or too vague to meet WCAG 2.2 standards—making the content invisible to screen-reader users and triggering direct compliance failures under 1.1.1 Non-text Content and 1.4.5 Images of Text. Manually auditing these at scale means crawling every page, distinguishing UI screenshots from decorative images like logos and icons, and subjectively judging each caption's sufficiency—a slow, inconsistent process that doesn't scale across large sites or frequent content updates. This workflow automates screenshot caption audits for any website: a user submits a URL and crawl depth, and the tool breadth-first crawls the site, extracts screenshot-like images, and uses Claude vision to confirm each is a genuine UI capture (filtering out non-screenshots) before evaluating its alt text against WCAG criteria and delivering a pass/fail verdict with severity, reasoning, and a concrete suggested replacement caption.
Solution and impact
The workflow converts a tedious, hours-long manual audit into a few-minute automated pass that surfaces only the images that matter—genuine screenshots with accessibility gaps—and delivers copy-ready remediation (suggested alt text) rather than vague red flags. By filtering out decorative images, logos, and non-UI content, it reduces reviewer noise and false positives, letting accessibility and content teams focus effort where it counts. Because it's URL-driven and read-only, it's reusable across any site for compliance reviews, pre-launch QA, or ongoing content audits without risk of unintended writes or changes to production systems.