Skip to content
Get packs

Image Alt Text Checker

Reviews HTML images for missing, generic, or misleading alt text and suggests accessible fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent checks the images in a web project for accessibility problems with alt text, the short description screen readers read aloud. It flags images with no alt attribute, filename-style or generic alt values like "image", and links or text-images described poorly, then rewrites them to describe purpose and meaning, using alt="" for decorative images. It also reviews image files, sizing and loading behaviour in code, and explains how to confirm the fix in browser DevTools.

Great for

  • Front-end developers auditing a site for WCAG 1.1.1 compliance
  • Designers or content editors who want clearer alt text for a page
  • Teams preparing an accessibility review before launch

Skip it if

  • Projects that need automated scanning across a whole site without a developer reviewing the output, since the agent judges alt text by reading code and may misjudge context
  • Generating alt text for images the agent cannot see; the skill works from markup and file names, so descriptions of actual image content may be guesses that need a human check

Try asking

  • “Check all the <img> tags in this React project and flag any missing or generic alt text”
  • “Rewrite the alt text on my product gallery so it describes what each image shows to a shopper”
  • “Which of these images are decorative and should use alt=""?”
  • “Review our header logo link and suggest alt text describing where it goes”
Step-by-step guide: how to use Image Alt Text CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    alt-text.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip alt-text.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip alt-text.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent access to the actual HTML or component files so it can scan every <img> element rather than guessing.
  • Tell it whether images are purely decorative or carry meaning, since it cannot always tell from filenames alone.
  • Review the suggested alt text yourself, especially for charts and infographics, and test with a screen reader or DevTools accessibility panel.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.