accessibility upgrade pro

    1

    Audit and remediate web accessibility issues with semantic HTML guidance and keyboard navigation plans.

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    accessibility upgrade pro

    Example session with this skill installed

    I have a custom dropdown menu built with divs that keyboard users can't open. Can you help me make it accessible?

    • Read your context and instructions
    • Compiled the accessibility upgrade pro
    • Generated the UI component

    I have analyzed the custom dropdown component. The primary issues are a lack of semantic triggers, missing keyboard event listeners, and no visible focus management.

    Accessibility Remediation: Custom Dropdown

    Component PartCurrent StateRemediation ActionARIA/Attribute Requirement
    TriggerdivChange to <button>aria-haspopup="listbox", aria-expanded="false"
    Menu ContainerdivAdd role="listbox"aria-labelledby="[button-id]"
    Menu ItemsdivAdd role="option"tabindex="-1" (managed focus)
    Focus StateNoneAdd :focus-visibleHigh-contrast outline (min 2px)

    Prioritized Fixes

    1. Swap Trigger to Button: Using a div for a trigger prevents keyboard users from discovering it via the Tab key.
    2. Implement Keyboard Listeners: Add Enter and Space to open, and ArrowDown/Up to navigate items.

    Manage Focus: When the menu opens, move focus to the first item. When Esc is pressed, close the menu and return focus to the trigger.

    Semantic Guidance

    <!-- Recommended Structure -->
<div class="dropdown-wrapper">
  <button 
    id="menu-button" 
    aria-haspopup="listbox" 
    aria-expanded="false" 
    aria-controls="menu-list">
    Select Option
  </button>
  <ul 
    id="menu-list" 
    role="listbox" 
    tabindex="-1" 
    hidden>
    <li role="option" tabindex="-1">Option 1</li>
    <li role="option" tabindex="-1">Option 2</li>
  </ul>
</div>

    Keyboard Test Plan

    1. Tab Navigation: Ensure the trigger button is reachable in the natural page tab order.
    2. Activation: Verify Space and Enter keys toggle the menu visibility.
    3. Escape Key: Verify the Esc key closes the menu and returns focus to the button.
    4. List Navigation: Ensure ArrowDown moves focus through the options without moving the page scroll.

    Next steps

    • Update the HTML template to use the <button> and <ul> tags as shown.
    • Add a JavaScript event listener for the keydown event to handle arrow key navigation.
    • Verify the focus outline is clearly visible in your brand colors.

    accessibility-upgrade-pro.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

    Convert non-semantic div-based UI into accessible components.Create step-by-step keyboard testing plans for complex web flows.Identify and fix common WCAG violations in forms and navigation.Generate ARIA-compliant code snippets for custom interactive elements.

    About this skill

    Retrofitting accessibility into an existing codebase often feels like a guessing game of ARIA roles and contrast ratios. This skill automates the audit and remediation process, turning vague requests into a prioritized implementation roadmap for WCAG-friendly interfaces.

    What it does

    • Semantic auditing identifies where native HTML elements should replace non-accessible custom components.
    • Keyboard mapping defines logical focus order and identifies traps that break navigation for non-mouse users.
    • Form remediation structures labels, error states, and recovery instructions to meet modern standards.
    • Visual logic check evaluates if motion or color are being used as the sole carriers of information.
    • Reflow analysis predicts how UI components will behave under browser zoom and responsive shifts.

    How it works

    1. Submit a code snippet, a description of a user flow, or a known list of accessibility complaints.
    2. The agent isolates facts from assumptions to build a professional accessibility structure.
    3. It applies domain-specific quality gates to prioritize fixes that impact usability most.
    4. You receive a structured artifact containing findings, code-level fixes, and a manual testing plan.

    Frameworks & tools

    Works with any web stack including React, Vue, Angular, and vanilla HTML/CSS. Guidance focuses on semantic HTML, WAI-ARIA standards, and WCAG 2.1/2.2 principles.

    Why this beats prompting it yourself

    Generic prompts often hallucinate ARIA attributes that actually break screen readers or focus on easy visual fixes while ignoring complex keyboard traps. This skill follows a rigorous professional standard that prefers native semantics over "ARIA-first" hacks, ensuring your site remains maintainable and truly usable.

    Use cases

    • Auditing a legacy landing page for basic keyboard and screen reader support.
    • Refactoring custom div-based buttons and menus into semantic components.
    • Designing accessible form validation logic and error messaging.
    • Creating a manual QA checklist for developers to verify focus states.

    Known limitations

    Cannot guarantee legal compliance or final WCAG certification without real-world assistive technology testing. Does not support automated color contrast checking of images.

    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 7 days ago

    • Passed all security checks, Safe to install

    Listed7 days ago

    What's inside

    Frequently Asked Questions