accessibility-audit-helper

# Accessibility Audit Helper ## What this skill does This skill directs the agent to review HTML, JSX, or React component code for WCAG 2.1 accessibility violations. It checks for missing alt text, improper heading hierarchy, ARIA misuse, keyboard trap risks, color contrast hints, missing focus indicators, and more. Every finding is categorized by severity with a concrete before/after code fix included. Use this before shipping any UI feature, during code review, or as a regular accessibility sweep of your component library. ## How to use ### Claude Code / Cline Copy this file to `.agents/skills/accessibility-audit-helper/SKILL.md` in your project root. Then share the component or page code and ask: - *"Run an accessibility audit on `src/components/Modal.tsx` using the Accessibility Audit Helper skill."* - *"Use the Accessibility Audit Helper skill to check this form for a11y issues."* Paste the component code directly or provide a file path for the agent to read. ### Cursor Add the "Prompt / Instructions" section to your `.cursorrules` file. Open the component you want audited and ask Cursor to run an accessibility audit. ### Codex Paste the component or page HTML/JSX into the chat along with the instructions below. ## The Prompt / Instructions for the Agent When asked to audit UI code for accessibility, follow these steps: 1. **Read the full component or file.** If it references child components or imports, note them but focus the audit on the provided code. ...