Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsa11y Review: Alt Text & Accessibility Fixer
Finds missing or meaningless alt text by actually looking at your images, then fixes it plus common HTML accessibility issues, only after you approve.
$9
a11y Review: Alt Text & Accessibility Fixer
Example session with this skill installed
Audit this site for accessibility issues. Check the images and the HTML structure.
- Read your context and instructions
- Compiled the a11y review
- Generated the UI component
Summary
Scanned 3 files (index.html, Nav.astro, Newsletter.tsx) and 6 <img> tags. Nothing has been changed yet.
- 4 images need alt text (3 verified by opening the image file, 1 inferred)
- 2 images are already correct
- 7 structural issues
Image alt text (6 items)
| # | File:Line | Issue | Current | Proposed alt | Confidence |
|---|---|---|---|---|---|
| 1 | index.html:19 | Missing | (none) | "Steaming latte in a white cup and saucer on a wooden table" | Verified (image read) |
| 2 | index.html:28 | Placeholder | alt="IMG_2031.jpg" | "Kraft paper bag of coffee beans with a cream label showing three beans" | Verified (image read) |
| 3 | index.html:34 | Placeholder | alt="image" | "Morning Cup Coffee storefront with a red-and-white striped awning" | Verified (image read) |
| 4 | index.html:35 | Missing | (none) | "Spring campaign banner" | Low confidence — remote URL, inferred from filename and context only |
| 5 | index.html:24 | Empty | alt="" | alt="" (decorative wave divider) | Verified — no change needed |
| 6 | index.html:41 | Empty | alt="" | alt="" (icon beside the visible text "Instagram") | Verified — no change needed |
Structural accessibility (7 items)
| # | File:Line | Issue | Current | Fix |
|---|---|---|---|---|
| 7 | index.html:10 | <nav> has no aria-label; links not in a list | <nav class="flex gap-4"> + bare <a> tags | <nav aria-label="Main navigation" class="flex gap-4"> with the links wrapped in <ul><li> |
| 8 | Nav.astro:8 | <nav> has no aria-label; links not in a list | <nav class="flex gap-4"> + mapped <a> tags | Same fix as #7, with <li> inside the .map() |
| 9 | index.html:20 | Second <h1> on the page | <h1>Small-batch coffee, roasted every morning</h1> | <h2>…</h2> (the site title at line 9 is the page's <h1>) |
| 10 | index.html:21 | Link used as a button | <a href="#" class="btn" onclick="openOrderDialog()"> | <button type="button" class="btn" onclick="openOrderDialog()"> |
| 11 | index.html:27 | Heading level skips (h1 → h3) | <h3>Our beans</h3> | <h2>Our beans</h2> |
| 12 | Newsletter.tsx:4 | <input> has no label (placeholder only) | <input type="email" placeholder="you@example.com" /> | <label htmlFor="email">Email</label> + <input id="email" type="email" placeholder="you@example.com" /> |
| 13 | Newsletter.tsx:5 | <button> has no type | <button onClick={…}>Subscribe</button> | <button type="button" onClick={…}>Subscribe</button> |
→ Type "yes" to apply all, or list the numbers you want (e.g. 1 2 3 7). Item 4 is low confidence — say the number followed by your own wording to override (e.g. 4 Spring collection: up to 30% off).
Next steps
- Items 5 and 6 are already correct as they are; no action needed.
- Replace the placeholder text in item 4 with the banner's real message once you have the image.
index.html
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Most accessibility linters can tell you an alt attribute is missing. They can't tell you what it should say, because that takes looking at the image. This skill does the looking.
It scans your project, resolves every img or Image tag to the real file on disk, opens the image, and writes a specific, context-aware alt text: "Kraft paper bag of coffee beans with a cream label", not "image" or "IMG_2031.jpg". Purely decorative images get alt="" instead of a forced description, which is the correct answer for screen readers.
What it checks
- Images: missing alt, empty alt, and placeholder alt (filenames, "image", "photo")
- Navigation: nav elements without an aria-label, link lists not wrapped in ul/li
- Buttons and links: buttons without a type attribute, links with href="#" used as buttons
- Forms: inputs with no associated label, placeholder used as the only label
- Headings: multiple h1 tags, skipped heading levels
How it works
- A bundled Node.js scanner finds every image tag in one deterministic pass (no dependencies).
- The agent opens each image file and proposes alt text, with a confidence level per item. Remote or unresolvable images are flagged as low confidence rather than guessed silently.
- You get numbered tables of proposed fixes. Nothing is edited until you say which ones to apply ("yes", or "1 2 5").
- Approved fixes are applied and summarized in a result table.
Works with HTML, Astro, React/JSX/TSX, Vue, and Svelte, with or without Tailwind. Large projects are grouped by section so the review stays readable.
What it is not
It is a focused checklist for the issues above, not a full WCAG audit. It doesn't test color contrast or keyboard behavior at runtime, so keep using axe / Lighthouse for those. Use it to fix the alt-text and markup problems that tools flag but can't fix for you.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Genuinely unresolvable remote images or dynamic source expressions result in lower-confidence inferences from filenames and context rather than visual analysis.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
- Software
Node.js
Permissions
File Scopes
Terminal: runs the bundled read-only scanner (node scripts/scan-images.js) to list image tags. Read Files: reads project source files and the image files they reference so alt text can describe the actual image. Write Files: edits source files only after you approve specific numbered items; nothing is written without confirmation. No network access and no environment variables.