Skip to content
Get packs

Image Button Alt Text Checker

Checks that image buttons have meaningful alt text so screen-reader users know what they do.

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

What it does

When this skill is installed, the agent reviews web page markup for image buttons (input elements of type image) and checks that each one has a non-empty alt attribute describing the action, such as Search or Submit, rather than the picture's file name. It also suggests how to verify the fix with accessibility tools or a screen reader. The skill is a short checklist-style instruction set drawn from the Front-End Checklist project; it contains no executable code.

Great for

  • Front-end developers reviewing forms and search bars for accessibility issues
  • Designers or QA reviewers auditing a page before release
  • Teams learning the basics of accessible image buttons

Skip it if

  • Image-only content like photos or illustrations that are not buttons, since this rule targets input type image elements (a different alt text guideline applies)
  • Full accessibility audits, because it covers only this single rule and cannot replace testing with real assistive technology

Try asking

  • “Review this login form HTML and tell me if the image submit button is accessible.”
  • “Check my search component for image buttons missing alt text and suggest wording.”
  • “Audit this checkout page markup for keyboard and screen-reader problems with image buttons.”
Step-by-step guide: how to use Image Button 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.

    input-image-alt.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip input-image-alt.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

  • Paste the rendered HTML or the component code so the agent can point to exact elements.
  • Ask the agent to suggest alt text wording based on what the button actually does, not what the image looks like.
  • Confirm the agent's findings with a browser accessibility inspector or a screen reader, since the skill itself only provides guidance.

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.