Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    HTML Accessibility Auditor

    1

    Static WCAG 2.2 accessibility auditor for HTML, JSX, Vue, and Svelte templates.

    $9.99

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned
    HTML Accessibility Auditor

    HTML Accessibility Auditor

    Example session with this skill installed

    Audit my login component in src/components/LoginForm.tsx for accessibility issues and provide fixes.

    • Read your context and instructions
    • Compiled the html accessibility auditor
    • Generated the UI component

    I have audited src/components/LoginForm.tsx. The scan identified 4 accessibility violations ranging from missing labels to incorrect ARIA usage.

    Accessibility Audit Report

    IssueWCAG Success CriterionSeverityRecommended Fix
    Missing <label> for username input1.3.1 (Info and Relationships)CriticalWrap input in a label or use htmlFor.
    Icon button missing accessible name4.1.2 (Name, Role, Value)HighAdd aria-label="Show password" to the button.
    Positive tabindex="1" detected2.1.1 (Keyboard)MediumRemove tabindex or set to 0 for natural flow.
    Non-semantic click on <div>2.1.1 (Keyboard)HighChange div to a <button> or add onKeyDown.

    Fixed Component Code

    import React, { useState } from 'react';

export const LoginForm = () => {
  return (
    <form className="login-form">
      <h1>Account Login</h1>
      <div className="field">
        <label htmlFor="user-id">Username</label>
        <input id="user-id" type="text" name="username" />
      </div>
      <div className="field">
        <label htmlFor="pass-id">Password</label>
        <input id="pass-id" type="password" name="password" />
        <button 
          type="button" 
          aria-label="Show password"
          onClick={() => {}}
        >
          👁️
        </button>
      </div>
      <button type="submit">Log In</button>
    </form>
  );
};

    Next steps

    • Verify focus order manually using the Tab key.
    • Test the "Show password" button with a screen reader to ensure the label is announced.
    • Ensure the error messages (if added) use aria-live="polite".

    LoginForm.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.

    About this skill

    Accessibility bugs often go unnoticed until a user reports a broken experience or a legal audit flags the site. This skill performs static analysis to catch WCAG 2.2 violations before they reach production.

    What it does

    • Static code scanning checks HTML, JSX, TSX, Vue, and Svelte files for common markup failures.
    • URL auditing fetches live pages to evaluate structured content and document-level properties.
    • Attribute validation flags missing alt text, missing iframe titles, and unlabeled form controls.
    • Semantic structure checks identifies skipped heading levels, missing landmarks, and broken table headers.
    • Interactive element audit detects positive tabindex values and click handlers missing keyboard support.
    • ARIA verification finds invalid roles and duplicate IDs that break screen reader navigation.

    How it works

    1. Target selection provides a directory path, a specific component file, or a live URL.
    2. Analysis mode selects the parser based on the file extension (e.g., --jsx for React components).
    3. Issue mapping generates a report linking each violation to a specific WCAG Success Criterion.
    4. Remediation provides the code fix required to resolve the identified accessibility debt.

    Frameworks & tools

    This tool works with standard HTML5, React (JSX/TSX), Vue, and Svelte templates. It maps findings directly to WCAG 2.2 standards.

    Why this beats prompting it yourself

    Generic LLMs often miss the nuance of ARIA roles or overlook specific WCAG success criteria like 2.1.1 (Keyboard) vs 4.1.2 (Name, Role, Value). This skill uses a systematic checklist to ensure structural compliance across entire component libraries.

    Use cases

    • Auditing a legacy HTML codebase for high-priority screen reader blockers.
    • Validating new UI components in React or Vue before merging a pull request.
    • Mapping existing website issues to specific WCAG 2.2 success criteria for compliance reports.
    • Checking live landing pages for basic document-level metadata and landmark errors.

    Known limitations

    Does not perform color contrast checks for dynamic CSS-in-JS or computed styles. Static analysis cannot replace manual screen reader testing or keyboard navigation checks.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    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 today

    • Passed all security checks, Safe to install

    Listedtoday

    What's inside

    Frequently Asked Questions