front end accessibility quick auditor

    1

    Perform evidence-based front-end accessibility audits and generate concrete code fixes with manual test plans.

    Free

    4 installs5.0 (2 reviews)

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    front end accessibility quick auditor

    Example session with this skill installed

    **Audit this button:** Save Profile. It is used in a standard user settings form.
    • Read your context and instructions
    • Compiled the front end accessibility
    • Generated the UI component

    The audit identified a critical interaction barrier where a div is used as a button without appropriate semantics or keyboard support.

    Accessibility Audit: Profile Save Control

    IDPriorityElementIssueImpactRecommendation
    ACC-01P0div.btnMissing Button SemanticsUser cannot identify this as a control via AT.Replace div with native <button>.
    ACC-02P0div.btnNot Keyboard NavigableKeyboard-only users cannot focus or trigger the action.Native <button> handles focus and Enter/Space keys.
    ACC-03P1div.btnVisual-only stateNo aria-disabled or state feedback for submission.Add state attributes if process is asynchronous.

    Proposed Fix

    <!-- RECOMMENDED: Use native button for free keyboard and AT support -->
<button type="button" class="btn" onclick="submit()">
  Save Profile
</button>

    Manual Validation Plan

    Keyboard Test: Tab to the element. Ensure a visible focus ring appears and the Enter key triggers the submit() function.
    2.

    Screen Reader Test: Navigate to the element using a screen reader (NVDA/VoiceOver). Confirm it is announced as "Save Profile, button."

    Next steps

    • Replace the div with the recommended <button> element.
    • Verify that existing CSS styles for .btn still apply correctly to the button tag.
    • Perform the manual keyboard test to ensure no scripts are blocking the default button behavior.

    front-end-accessibility-quick-auditor.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

    The problem

    Automated accessibility tools miss logical structure errors and produce false positives. Developers often struggle to translate vague WCAG guidelines into concrete code fixes or manual test plans.

    What it does

    • Performs multi-layered audits of HTML, CSS, and screenshots for ARIA, semantics, and keyboard risks.
    • Prioritizes findings based on user impact, confidence, and implementation effort.
    • Generates specific, minimal safe code fixes for identified barriers.
    • Constructs manual validation plans for behaviors that static analysis cannot prove, like screen-reader announcements or focus traps.
    • Differentiates strictly between observed evidence, inferences, and recommendations to prevent hallucinations.

    Why this beats prompting it yourself

    General LLMs often invent accessibility scores or hallucinate ARIA attributes that break native semantics. This skill uses a rigorous evidence-to-diagnosis chain and forced reference checks to ensure recommendations are technically sound and verifiable.

    Use cases

    • Reviewing component HTML during development to catch semantic errors before PR submission.
    • Auditing complex form states and error messaging for screen-reader compatibility.
    • Generating developer-focused handoff documents that bridge the gap between design audits and code.
    • Identifying focus management risks in interactive UI patterns like modals or dropdowns.

    Known limitations

    Static analysis cannot confirm actual screen-reader output, browser-specific rendering, or real-time focus behavior. These require the manual validation steps provided in the output.

    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

    5.0
    2 reviews
    5
    2
    4
    0
    3
    0
    2
    0
    1
    0

    4 people have installed this skill.

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Free to download with an account

    Listed14 days ago
    Updated7 days ago

    What's inside

    Frequently Asked Questions