check-a11y

Detect and report accessibility violations in React TSX files with line numbers and fixes.

Updated Mar 24, 2026

Search Tags:#testing #ui #accessibility #a11y #react #audit #aria

Ready to run

npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill check-a11y-sumitrajpal

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: check-a11y
Source: https://github.com/SumitRajpal/nextjs-claude-architecture/tree/main/.claude/skills/check-a11y
Command: npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill check-a11y-sumitrajpal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits React UI components to identify accessibility violations, ensuring ARIA attributes, keyboard navigation, and semantic HTML are correctly implemented to improve inclusivity.

Core Features & Use Cases

Detect missing alt attributes on images, unlabeled buttons or controls, links without valid href, and interactive elements lacking ARIA labels.
Verify focus management for modals/dialogs, presence of skip navigation, and correct use of roles for interactive components.
Produce per-file reports with line numbers and actionable fixes to streamline remediation and QA workflows.

Quick Start

Run the check-a11y audit to scan your codebase for accessibility violations.

Frequently Asked Questions about check-a11y

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

FAQPage Schema

How do I audit React components for accessibility violations?▼

To audit React components for accessibility violations, apply static analysis to your tsx files to detect missing alt attributes, unlabeled controls, and invalid link hrefs. The process outputs per-file reports with line numbers and recommended fixes.

What is the best way to check for missing ARIA attributes in my UI?▼

Checking for missing ARIA attributes involves scanning interactive elements lacking labels and verifying correct role usage for components like modals. This static analysis identifies inaccessible links and improper landmark usage across your application.

Can I detect incorrect modal roles and focus management issues in React?▼

Yes, you can detect incorrect modal roles and focus management issues in React by running a static analysis audit. It verifies focus management for modals and dialogs, ensuring correct implementation of interactive components and landmarks.

Does this accessibility audit work with files outside of src/components and src/app?▼

The accessibility audit specifically targets React components in src/components/**/*.tsx and src/app/**/*.tsx. Scanning files outside these directories requires adjusting your static analysis glob patterns to include your specific paths.

How do I fix unlabeled buttons and inaccessible links found during an a11y audit?▼

To fix unlabeled buttons and inaccessible links found during an a11y audit, review the generated per-file reports. These reports provide specific line numbers and actionable recommended fixes to streamline your remediation workflow.