a11y-self-check

Validate generated HTML/JSX/TSX output for WCAG 2.1 AA accessibility compliance.

3|1|Updated Dec 23, 2025

Search Tags:#accessibility #a11y #ARIA #WCAG #UI #JSX

Ready to run

npx skills add https://github.com/naporin0624/claude-web-audit-plugins --skill a11y-self-check

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: a11y-self-check
Source: https://github.com/naporin0624/claude-web-audit-plugins/tree/main/skills/a11y-self-check
Command: npx skills add https://github.com/naporin0624/claude-web-audit-plugins --skill a11y-self-check

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Proactively validates Claude Code's generated HTML/JSX/TSX output for accessibility before presenting to users.

Core Features & Use Cases

WCAG 2.1 AA compliance validation during UI generation
Guidance to WCAG/ARIA references for fixes
Integrated checks to minimize accessibility regressions in UI components

Quick Start

Generated UI code triggers a11y checks automatically
If issues are found, consult the WCAG/ARIA references and re-run the self-check

Frequently Asked Questions about a11y-self-check

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

FAQPage Schema

How do I validate HTML and JSX for accessibility compliance?▼

Accessibility validation checks HTML/JSX/TSX output against WCAG 2.1 AA standards to identify issues like missing labels, poor color contrast, and improper ARIA attributes. This Skill automatically validates Claude Code's generated UI components and returns a structured report with violations and remediation guidance.

Can I check accessibility during UI component generation?▼

Yes. The self-check runs automatically when generating new HTML, JSX, or TSX, catching accessibility regressions before code is presented. It integrates with a11y lint tooling to validate forms, modals, navigation, and other components.

What WCAG issues does this catch in generated code?▼

The validation detects WCAG 2.1 AA violations including missing semantic elements, insufficient ARIA labels, keyboard navigation gaps, color contrast failures, and form accessibility problems. Results include references to WCAG and ARIA standards for remediation.

Do I need to run accessibility checks manually?▼

No. Checks trigger automatically on HTML/JSX/TSX generation. If violations are found, the report guides you to WCAG/ARIA references; you can then re-run the self-check after fixes to validate compliance.

What frameworks and formats does this support?▼

The Skill validates JSX, TSX, and plain HTML output. It works with any framework or library that generates these formats, focusing on WCAG 2.1 AA compliance across all component types.