a11y-compliance-scanner
Automatically scan and patch frontend code for WCAG 2.2 accessibility violations.
- Patch non-semantic components to support keyboard and screen reader users
- Verify WCAG 2.2 compliance before shipping new frontend features
- Correct focus management in modals, menus, and complex UI widgets
$9
One-time purchase
Included in download
- Patch non-semantic components to support keyboard and screen reader users
- Verify WCAG 2.2 compliance before shipping new frontend features
- Includes example output and usage patterns
See it in action
## Finding #1 — Non-semantic trigger
- Severity: Critical
- WCAG criterion: 2.1.1 Keyboard
- Issue: <div> with onClick is not keyboard focusable.
- Fix: Replace <div> with <button type="button"> and add aria-expanded.
```jsx
<button aria-expanded={open} onClick={toggle}>Menu</button>
```a11y-compliance-scanner
Automatically scan and patch frontend code for WCAG 2.2 accessibility violations.
$9
One-time purchase
⚡ Also available via Agensi MCP — your AI agent can load this skill on demand via MCP. Learn more →
Included in download
- Patch non-semantic components to support keyboard and screen reader users
- Verify WCAG 2.2 compliance before shipping new frontend features
- Includes example output and usage patterns
- Instant install
- One-time purchase
See it in action
## Finding #1 — Non-semantic trigger
- Severity: Critical
- WCAG criterion: 2.1.1 Keyboard
- Issue: <div> with onClick is not keyboard focusable.
- Fix: Replace <div> with <button type="button"> and add aria-expanded.
```jsx
<button aria-expanded={open} onClick={toggle}>Menu</button>
```About This Skill
Professional Accessibility Auditing for Developers
Ensure your web applications are inclusive and compliant with the latest WCAG 2.2 standards. This skill performs a deep static analysis of your frontend source code to identify barriers that prevent users with disabilities from interacting with your site. It goes beyond simple automated linting by analyzing logic, focus management, and semantic structure.
What it does
- Semantic Validation: Converts non-semantic clickable divs and spans into accessible buttons and links.
- Keyboard Navigation: Ensures every interactive element is reachable via Tab and operable via Enter/Space, including custom focus management.
- Screen Reader Context: Adds missing ARIA attributes (labels, expanded states, roles) and ensures dynamic content is announced via live regions.
- Framework Patterns: Provides idiomatic fixes for React (refs/JSX), Vue (v-bind), Angular (CDK), and Svelte (actions).
- Severity-Rated Reports: Categorizes findings from Critical to Info so you can prioritize high-impact fixes.
Why use this skill?
Standard linters often miss complex logic issues like focus traps or missing state announcements (aria-expanded). This skill thinks like an a11y consultant, identifying not just syntax errors, but user experience hurdles for keyboard and screen-reader users. You get a fully patched version of your code ready for a PR.
Supported Tech
React, Vue, Angular, Svelte, and vanilla HTML/JavaScript.
📖 Learn more: Best Frontend & Design Skills for Claude Code →
Use Cases
- Patch non-semantic components to support keyboard and screen reader users
- Verify WCAG 2.2 compliance before shipping new frontend features
- Correct focus management in modals, menus, and complex UI widgets
- Add missing ARIA roles and labels to icon-based interfaces
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/a11y-compliance-scanner | tar xz -C ~/.claude/skills/Free skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Frequently Asked Questions
Learn More About AI Agent Skills
Similar Skills
code-reviewer
Reviews your code for bugs, security vulnerabilities, logic errors, performance issues, and style violations. Organizes findings by severity and suggests fixes with code examples.
git-commit-writer
Writes conventional commit messages by analyzing your staged git changes. Detects commit type, scope, and breaking changes automatically.
readme-generator
Generates a complete, polished README.md by scanning your actual project structure, dependencies, and code.
env-doctor
Diagnoses why your project will not start. Checks runtime versions, dependencies, environment variables, databases, ports, and build artifacts systematically.