Provide alt text for image buttons
SkillMediainput-image-alt is a skill that guides an AI agent through checking that image buttons have proper alt text when reviewing web pages. It is used when reviewing rendered HTML, interactive components, or design-system patterns related to providing alt text for image buttons. The agent checks native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills.
Then ask your AI: use the Provide alt text for image buttons skill
What your AI can do with it
- Check that image buttons have proper alt text
- Review rendered HTML for image-button accessibility
- Inspect native semantics first when reviewing components
- Check keyboard behavior and focus flow
- Verify accessible names on image buttons
- Check screen-reader output where relevant
Getting started
- Have an agent that can load skills.
- Add the input-image-alt skill to the agent's available skills.
- Ask the agent to review a web page, component, or design-system pattern involving image buttons.
- The agent applies the skill to check alt text, semantics, keyboard behavior, focus flow, accessible names, and screen-reader output.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/input-image-alt/SKILL.md and read by ahel’s review.
Without alt text, screen readers may read the file name of the image, leaving users unable to determine the function of the button.
Quick Reference
- Add an
altattribute to<input type='image'> - Describe the action of the button, not just the image
- Ensures the button's purpose is clear to assistive technology
Check
Verify that all elements have a non-empty 'alt' attribute.
Fix
Add an 'alt' attribute to the that describes the action performed when the button is clicked (e.g., 'Search', 'Submit').
Explain
Explain why image buttons require alternative text to communicate their function to users who cannot see the image.
Code Review
Review the rendered markup and interactive states that affect Provide alt text for image buttons. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/input-image-alt
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- When reviewing rendered HTML, interactive components, or design-system patterns related to providing alt text for image buttons.
- What does the agent check first?
- Native semantics are checked first, before keyboard behavior, focus flow, accessible names, and screen-reader output.
- Does it check anything besides alt text?
- Yes. It also covers keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Advanced
- Item type
- skill
- Key
input-image-alt- Source
- github.com/thedaviddias/front-end-checklist