audit-a11y

Audit React/JSX routes for accessibility defects and WCAG AA contrast.

22|3|Updated Jul 28, 2024
One-click install
npx skills add https://github.com/webdevcody/go-mailing-list --skill audit-a11y-webdevcody
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: audit-a11y
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/audit-a11y
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill audit-a11y-webdevcody

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you catch and correct common accessibility issues in a specific route or component, before they become keyboard, screen-reader, or color-contrast problems for users.

Core Features & Use Cases

  • Keyboard reachability & focus issues: Finds elements that aren’t reachable via Tab, missing keyboard semantics, and focus-management gaps around modals/dialogs.
  • Screen-reader semantics checks: Detects missing accessible names, missing input/label associations, missing live-region attributes for dynamic status, and problematic ARIA patterns.
  • WCAG AA contrast verification: Resolves theme tokens to actual colors (including light/dark) and computes contrast ratios, flagging failures for design review when needed.
  • Safety-first auto-fixes: Applies only mechanically deterministic fixes (like converting clickable divs to real buttons with type="button") while reporting structural problems for human decisions.

Quick Start

Run an accessibility audit for the target route/component by telling the AI what file or UI surface to check (for example, “/dashboard tab order and aria check”).

Frequently Asked Questions about audit-a11y

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

FAQPage Schema
How do I check my React component for WCAG AA contrast and screen-reader issues?

To check React components for WCAG AA contrast and screen-reader issues, a static analysis audit scopes the UI surface, detects missing ARIA patterns via grep, resolves theme tokens to compute contrast ratios, and reports structural defects for design review.

What is the best way to fix keyboard navigation and focus management gaps in JSX routes?

Fixing keyboard navigation and focus gaps in JSX routes involves scoping the audit surface, auto-correcting deterministic defects like converting clickable divs to buttons, and reporting complex focus-management issues around modals for manual resolution.

Can I detect missing accessible names and input label associations without running a browser?

You can detect missing accessible names and input label associations without a browser by applying static reads and grep-based pattern matching to React/JSX structures to find problematic ARIA patterns and semantic gaps.

Does this accessibility audit use axe-core or browser engines to evaluate ARIA patterns?

This accessibility audit does not use axe-core or browser engines, relying entirely on static analysis and grep-based pattern matching to evaluate ARIA patterns, keyboard semantics, and theme token contrast ratios.

When should I not use automated fixes for accessibility defects in my front-end codebase?

You should avoid automated fixes for accessibility defects when problems are structural rather than deterministic, such as complex focus management around dialogs or contrast ratio failures, which require human design review decisions.

How do I audit a specific UI route for missing live-region attributes and keyboard reachability?

To audit a UI route for missing live-region attributes and keyboard reachability, provide the target file or surface, and the phased workflow scopes the audit surface, categorizes findings, applies safe deterministic fixes, and reports structural issues.