Image Alt Text Checker
Paste a page\'s HTML and this tool inspects every <img> element for alt-text quality. It grades each image as missing (WCAG error), filename (bad), redundant (bad), too long (warn), empty/decorative (noted), or good — and gives a one-line fix for every failing case. Summary counts appear at the top so you can prioritise what to fix first.
How to use the Image Alt Text Checker
Paste any HTML — a full page, a <body> snippet, or even just a few <img> tags — and click Check Alt Text. The tool uses DOMParser to safely parse the HTML (no scripts execute, nothing is injected into the live page), then evaluates every image it finds.
Verdict priority (highest to lowest severity): MISSING — the alt attribute is absent entirely (WCAG 1.1.1 Level A failure); FILENAME — the alt text ends in a recognised image extension or matches the src basename; REDUNDANT — starts with "image of", "picture of", or "photo of" (screen readers already announce the element as an image); TOO LONG — over 125 characters (complex descriptions should go in longdesc or adjacent text); EMPTY — alt="" (correct for decorative images, noted for verification); GOOD — passes all checks. Each row shows the src path (truncated to 45 chars), the alt value (or a badge for missing/empty), the verdict, and a concrete fix suggestion.
Why alt text matters and how to write it
The alt attribute on <img> is how HTML communicates image content to screen readers, search engine crawlers, and users whose images fail to load. WCAG 1.1.1 (Level A — the most foundational accessibility level) requires a text alternative for every non-decorative image. Without it, a screen reader typically announces the filename or the string "image", giving the user no useful information.
Good alt text is concise, describes the image's purpose in context (not just its content), and does not start with "image of" or "picture of" because assistive technology already conveys that the element is an image. Decorative images — dividers, background textures, icons that duplicate adjacent link text — should use alt="" so screen readers skip them entirely. Never omit the attribute entirely on a decorative image; that is a different, worse signal. The practical length cap of ~125 characters comes from older screen reader buffer limits; complex graphics need a long-form description in adjacent HTML, not stuffed into the alt.
For SEO, alt text also provides context to image search crawlers and helps reinforce page topic relevance. However, keyword-stuffed alt text is penalised by Google's quality algorithms; write for the user first and SEO benefits follow naturally. The most common real-world problems this tool finds are: images exported directly from a CMS with filenames like IMG_4821.jpg used verbatim as the alt, and templates where the alt is the same as the image's title attribute (also bad — they should differ).
Common use cases
- WCAG / Section 508 audits — quickly triage which images are accessibility failures before a formal audit, so you can fix the easy ones first.
- CMS content review — export a page\'s HTML from a CMS (WordPress, Drupal, Contentful) and audit before publish to catch editor errors.
- E-commerce product pages — product images are crawled by Google Images; good alt text on every variant image drives additional organic traffic.
- Site migration checks — after migrating to a new CMS or framework, verify that alt attributes survived the migration intact.
- Automated QA pipeline — copy the logic (DOMParser + regex rules) into a Node.js script to run as part of your CI image-quality gate.