Accessibility Audit (WCAG)

Scan React/HTML source files for WCAG accessibility violations and generate line-referenced reports.

1|1|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/Bambibanners/master_of_puppets --skill accessibility-audit-wcag
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Accessibility Audit (WCAG)
Source: https://github.com/Bambibanners/master_of_puppets/tree/main/.agent/skills/review-accessibility
Command: npx skills add https://github.com/Bambibanners/master_of_puppets --skill accessibility-audit-wcag

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill detects accessibility barriers in React/HTML codebases, enabling teams to surface issues that affect keyboard navigation, screen readers, and visual contrast.

Core Features & Use Cases

  • Automated scanning of source files for common WCAG violations (missing alt text, improper ARIA usage, non-semantic elements).
  • Report generation that highlights problematic lines with remediation guidance and suggested fixes.
  • Use Case: Integrate into CI to automatically flag accessibility regressions during pull requests.

Quick Start

Scan the React/HTML project to identify accessibility barriers and export a remediation-ready report.

Frequently Asked Questions about Accessibility Audit (WCAG)

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

FAQPage Schema
How do I check my React components for WCAG accessibility issues?

You can check React components for WCAG accessibility issues by running an automated source file scanner that surfaces missing alt text, improper ARIA usage, and non-semantic HTML, generating a structured report with line references and remediation guidance.

What's the best way to automate accessibility testing in a CI pipeline?

Automating accessibility testing in CI involves scanning source files during pull requests to automatically flag regressions like missing alt text or improper ARIA usage, producing a remediation-ready report that highlights problematic lines and suggested fixes.

How does an automated a11y scanner detect missing alt text and ARIA issues?

An automated a11y scanner inspects React and static HTML source files to detect missing alt text and ARIA issues by analyzing code semantics, then outputs a structured report identifying the exact line references of the violations.

Can I use this accessibility audit tool with static HTML files or is it only for React?

This accessibility audit tool works with both static HTML files and React codebases, inspecting frontend source files to identify common WCAG violations such as missing alt text, improper semantics, and incorrect ARIA implementation.

Does the accessibility audit report include suggested fixes for non-semantic elements?

Yes, the accessibility audit report includes remediation guidance and suggested fixes for non-semantic elements, highlighting the problematic lines in your React or HTML source files to help correct keyboard navigation and screen reader barriers.