Accessibility Auditor

The Problem

Your UI renders perfectly in Chrome with a mouse. But 15% of users navigate with a screen reader, another 10% rely on keyboard-only access, and your legal team just forwarded a demand letter about ADA compliance. You know your app has accessibility gaps — missing labels, divs pretending to be buttons, heading levels that jump from h1 to h4 — but you don't know where they are, how many there are, or which ones are critical vs. cosmetic.

Running Lighthouse gives you a score and 47 recommendations. Running axe-core gives you a spreadsheet. Neither tells you which findings are WCAG AA blockers for your specific component library, which are best practices that improve experience but aren't violations, and what the actual code fix looks like for each.

What You Get

• Full WCAG 2.2 AA checklist scan — Perceivable (alt text, contrast, content adaptation), Operable (keyboard access, focus management, motion), Understandable (language declaration, error handling, input assistance), Robust (valid HTML, ARIA roles, status messages)
• Quick-scan violation patterns — 12 common patterns detected with exact fix templates: <img> without alt, <div onclick> instead of <button>, empty links, nested interactives, color-only state indicators, missing form labels, skipped heading levels, low contrast text
• Severity classification — Critical (Level A violation, blocks basic access), Major (Level AA, degrades experience), Minor (best practice, improves quality)
• ARIA quick reference — roles, states, properties, and keyboard interaction patterns for buttons, links, checkboxes, radio groups, comboboxes, dialogs, and sliders
• Specific remediation code — not "add ARIA attributes" but the exact attribute, value, and placement for each violation
• Tool integration recommendations — pairs with axe-core, Lighthouse, WAVE, pa11y, and eslint-plugin-jsx-a11y for automated regression testing

Why This Beats Prompting It Yourself

An Lighthouse score of 85 hides the reality that your modal dialog has no focus trap and your form error messages are invisible to screen readers. The auditor walks through every WCAG criterion systematically, classifies by impact (a missing lang attribute forces every screen reader to use the wrong voice for your entire page), and provides the specific ARIA attribute or HTML change needed — not generic advice.

Example Session

You: "Audit this React dashboard for accessibility. It uses Material UI components."

Agent:

# Accessibility Audit Report
Summary: 14 issues found | Critical: 3 | Major: 6 | Minor: 5
WCAG Conformance Level: Non-conformant (Level A violations present)

## Critical (Must Fix — Blocks Conformance)
1. [WCAG 1.1.1 — Level A] Missing alt on dashboard chart images
   Location: src/components/Charts.tsx:34
   Impact: Screen readers announce nothing for data visualization
   Fix: <img src={chart.url} alt={`Sales chart: ${chart.summary}`} />

2. [WCAG 4.1.2 — Level A] Div used as button without ARIA
   Location: src/components/FilterBar.tsx:18
   Impact: Keyboard users cannot activate; screen readers announce nothing
   Fix: Replace <div onClick={handleFilter}> with <button onClick={handleFilter}>

3. [WCAG 2.4.1 — Level A] No skip navigation link
   Location: src/App.tsx (layout component)
   Impact: Keyboard users must tab through entire nav on every page
   Fix: Add <a href="#main-cont

Use Cases

• Pre-release accessibility gate — audit before every release to catch regressions and new component issues
• ADA/WCAG compliance preparation — generate a conformance report for legal or certification reviews
• Component library audit — scan shared UI components that propagate accessibility issues across every page
• New feature review — check recently added components for violations before merging
• Remediation sprint planning — severity-rated backlog with specific fix efforts per finding

Known Limitations

The auditor performs static code analysis — it detects structural patterns (missing attributes, wrong element types, ARIA gaps) but cannot verify runtime behavior like actual keyboard navigation flow or screen reader announcement correctness. Dynamic content rendered from APIs or CMS may require manual review.