audit-a11y

Audit React routes and components for WCAG AA accessibility issues.

121|2|Updated Apr 24, 2026
One-click install
npx skills add https://github.com/AgentSystemLabs/core --skill audit-a11y-agentsystemlabs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: audit-a11y
Source: https://github.com/AgentSystemLabs/core/tree/main/plugins/agentsystem-core/skills/audit-a11y
Command: npx skills add https://github.com/AgentSystemLabs/core --skill audit-a11y-agentsystemlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you catch common accessibility failures in a route or component early, before they become user-facing issues for keyboard and screen-reader users.

Core Features & Use Cases

  • Keyboard reachability checks: Detects click handlers that aren’t accessible via keyboard, missing focus behavior, and tab-order hazards.
  • Screen-reader semantics checks: Flags missing accessible names for icon-only controls, absent image alt, missing label associations, and incomplete ARIA patterns.
  • Focus management & modal guidance: Identifies dialogs/sheets/drawers that lack focus trapping and reports focus-return gaps.
  • WCAG AA contrast analysis: Resolves Tailwind/shadcn tokens to color values and checks ratios against WCAG AA thresholds.

Quick Start

Ask the agent to run an accessibility audit on the specific component or route you’re working on, and let it auto-fix the mechanical issues it can prove safely.

Frequently Asked Questions about audit-a11y

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a static accessibility audit on my React components without a browser?

A static accessibility audit checks source files for missing ARIA semantics, keyboard navigation gaps, and focus management issues, catching common barriers for keyboard and screen-reader users before runtime.

How do I check WCAG AA contrast ratios when using Tailwind or shadcn tokens?

To check WCAG AA contrast, the audit resolves Tailwind and shadcn UI tokens to their actual color values and evaluates the resulting ratios against WCAG AA thresholds directly from your static code.

Can I automatically fix missing keyboard navigation and focus trapping in modals?

You can automatically fix mechanical keyboard navigation and focus trapping issues in modals using safe inline reference recipes, while structural dialog changes needing architectural rework are reported separately.

Does this static code analysis detect missing alt text and ARIA patterns for icon-only controls?

Yes, the static code analysis detects missing accessible names for icon-only controls, absent image alt attributes, missing label associations, and incomplete ARIA patterns across your specified routes.

What are the limitations of static accessibility audits compared to using axe-core?

Static accessibility audits are limited to deterministic file reads and pattern matching, meaning they cannot catch runtime DOM mutations or dynamic rendering behaviors that browser-based axe-core testing would detect.