skills.rest
SumitRajpal
SumitRajpalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill check-a11y-sumitrajpal
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
esneiderbravoesneiderbravo
1

react-best-practices

Review TSX files for React best practices and generate prioritized refactoring reports.

Community
Advanced
meirmmeirm
13

checking-code-formatting

Detect code formatting issues across multiple programming languages.

Community
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced