Accessibility Auditor

Audit frontend code for WCAG 2.2 AA compliance with prioritized remediation steps and deep semantic analysis.

Install
cmdop skills install agensi-accessibility-auditor

Accessibility Auditor is a skill that performs structural and semantic analysis of frontend component code to check compliance with WCAG 2.2 AA standards. It accepts HTML, JSX (React), Vue templates, Svelte, and Angular templates, as well as common UI patterns such as modals, tabs, and comboboxes built with standard HTML5.

When an agent runs an audit, it receives a structured Accessibility Audit Report organized into three severity tiers: Critical, Major, and Minor. Each issue entry includes an impact analysis explaining how the problem affects screen readers and other assistive technology, remediation steps with direct code fixes, and a reference to the specific WCAG 2.2 success criterion involved — for example, 2.1.1 Keyboard or 1.1.1 Text Alternatives. The report also includes a conformance summary showing pass and failure counts against AA levels.

The types of issues the skill detects include missing ARIA roles, keyboard traps, low color contrast, and non-semantic heading hierarchies. The skill references axe-core, Lighthouse, and WAVE as external tools suitable for independently verifying findings.

This is a skill rather than an MCP server, so it extends an agent’s analysis capability without connecting to a live database or external service. It is most useful during code review or pre-production stages when a developer or automated agent needs actionable accessibility compliance reports from source code without running a browser.

Use cases

  • Audit a React JSX component for missing ARIA roles before merging a pull request
  • Identify keyboard traps in a modal or tab component during automated code review
  • Generate a WCAG 2.2 AA conformance report with pass/fail counts for a Vue template
  • Obtain code-ready fixes mapped to specific WCAG success criteria for low color contrast issues
  • Check Angular or Svelte templates for non-semantic heading hierarchies
  • Integrate accessibility compliance checking into an AI agent's frontend development workflow

When to use it

  • Auditing HTML, JSX, Vue, Svelte, or Angular source code for WCAG 2.2 AA compliance
  • Needing severity-tiered, code-specific remediation steps rather than generic guidance
  • Automating accessibility checks inside an AI agent during code generation or review
  • Checking common UI patterns such as modals, tabs, and comboboxes for ARIA and keyboard issues

When not to use it

  • Runtime or browser-based auditing that requires a rendered DOM — this skill analyzes source code only
  • Projects targeting WCAG conformance levels other than AA
  • Backend, API, or non-frontend code that has no HTML or component template structure
  • Situations requiring live invocation of axe-core, Lighthouse, or WAVE — those tools are referenced for verification only, not executed by this skill