skills.rest
pvillega
pvillegaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

23|7|Updated Sep 8, 2025
Search Tags:#accessibility#a11y#frontend#audit#eslint#wcag#axe-core
One-click install
npx skills add https://github.com/pvillega/claude-templates --skill wcag-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wcag-audit
Source: https://github.com/pvillega/claude-templates/tree/main/plugins/ct/skills/wcag-audit
Command: npx skills add https://github.com/pvillega/claude-templates --skill wcag-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the discovery and reporting of common web accessibility (WCAG) issues by combining static code analysis with runtime testing to surface problems automated tools can detect and to highlight areas needing manual review.

Core Features & Use Cases

  • Framework detection and scope selection: Detects React, Vue, or plain HTML projects and determines which files or changed diffs to scan.
  • Two-layer auditing: Runs ESLint accessibility plugins for fast static checks and axe-core CLI against live URLs for runtime coverage.
  • Actionable findings: Outputs severity-ranked issues, maps runtime violations back to source files when possible, and provides a manual-review checklist for gaps automation cannot cover.
  • Use case: Use this skill after a UI implementation or before merge to catch missing alt text, color-contrast failures, ARIA misuse, and other common accessibility regressions.

Quick Start

Run a static ESLint accessibility scan on changed files and then run axe-core against the running app URL to generate a combined accessibility report.

Frequently Asked Questions about wcag-audit

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

FAQPage Schema
How do I audit my web application for WCAG accessibility violations?▼

To audit WCAG accessibility violations, run static ESLint accessibility plugins on React, Vue, or HTML code and execute axe-core against live URLs for runtime analysis. This combination detects missing alt text, color-contrast failures, and ARIA misuse.

What is the best way to automate accessibility checks before merging frontend code?▼

Automating accessibility checks before merge involves running ESLint plugins for fast static code analysis and axe-core CLI for runtime coverage. This two-layer auditing approach catches common accessibility regressions in your UI implementation.

Does this accessibility audit work with Vue and React projects?▼

Yes, this accessibility audit works with Vue and React projects by detecting the framework and applying the appropriate ESLint accessibility plugins. It also supports plain HTML projects for static code analysis.

Can axe-core detect all WCAG issues automatically?▼

axe-core cannot detect all WCAG issues automatically because some require human judgment. It surfaces detectable violations and provides a manual-review checklist to guide developers through accessibility gaps that automation cannot cover.

How do I map runtime accessibility violations back to my source files?▼

Mapping runtime accessibility violations back to source files is handled by the audit tool during analysis. It correlates axe-core runtime findings against live URLs with your original codebase files when possible to pinpoint exact locations.

Related Skills

Explore More Software Engineering Skills→
gc-da11yngc-da11yn
41

web-scanning

Automate web accessibility scans and page inventories using axe-core CLI.

Official
Advanced
mattobeemattobee

fixing-accessibility-issues

Fixes WCAG violations in UI code from axe-core scans and audits with validated workflows.

Community
Advanced
esassocesassoc
4

audit-a11y

Run WCAG 2.2 AA accessibility audits on Angular frontends with axe-core and ESLint.

Official
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced