Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    a11y Review: Alt Text & Accessibility Fixer

    2

    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

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    a11y Review: Alt Text & Accessibility Fixer

    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:LineIssueCurrentProposed altConfidence
    1index.html:19Missing(none)"Steaming latte in a white cup and saucer on a wooden table"Verified (image read)
    2index.html:28Placeholderalt="IMG_2031.jpg""Kraft paper bag of coffee beans with a cream label showing three beans"Verified (image read)
    3index.html:34Placeholderalt="image""Morning Cup Coffee storefront with a red-and-white striped awning"Verified (image read)
    4index.html:35Missing(none)"Spring campaign banner"Low confidence — remote URL, inferred from filename and context only
    5index.html:24Emptyalt=""alt="" (decorative wave divider)Verified — no change needed
    6index.html:41Emptyalt=""alt="" (icon beside the visible text "Instagram")Verified — no change needed

    Structural accessibility (7 items)

    #File:LineIssueCurrentFix
    7index.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>
    8Nav.astro:8<nav> has no aria-label; links not in a list<nav class="flex gap-4"> + mapped <a> tagsSame fix as #7, with <li> inside the .map()
    9index.html:20Second <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>)
    10index.html:21Link used as a button<a href="#" class="btn" onclick="openOrderDialog()"><button type="button" class="btn" onclick="openOrderDialog()">
    11index.html:27Heading level skips (h1 → h3)<h3>Our beans</h3><h2>Our beans</h2>
    12Newsletter.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" />
    13Newsletter.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.

    a11y-review-alt-text-accessibility-fixer.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Generate descriptive alt text by analyzing actual project image files.Fix broken heading hierarchies and missing ARIA labels in components.Identify and label form inputs missing associated label elements.Ensure decorative images are correctly marked with empty alt attributes.

    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

    1. A bundled Node.js scanner finds every image tag in one deterministic pass (no dependencies).
    2. 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.
    3. You get numbered tables of proposed fixes. Nothing is edited until you say which ones to apply ("yes", or "1 2 5").
    4. 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.

    More from KMRVID

    The full Claude Code skill bundle for web design workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 5 days ago

    • Passed all security checks, Safe to install

    Listed6 days ago
    Updated3 days ago

    What's inside

    Frequently Asked Questions