WCAG 2.2 AA Codebase Audit, Fix, and CI Gate
Audit a frontend app against WCAG 2.2 A/AA, fix violations in your framework's idiom, and gate regressions in CI with axe and lint.
Before & after
Same prompt, same agent — the only difference is the skill.
Accessibility is important. You should check that your site works for people with disabilities. Some things to look for: color contrast — make sure text is dark enough on light backgrounds. Alt text on images so screen readers can describe them. Keyboard navigation — everything should be usable with just a keyboard, no mouse required. Form labels should be clearly associated with input fields. Headings should be in the right order (h1, then h2, etc.). Links should have meaningful text, not just "click here." Videos should have captions. Font sizes should be readable. You might use a tool to scan for basic issues, but manual testing is important too. Some accessibility issues are hard to catch automatically. You should test with screen readers if possible. WCAG 2.2 is the current standard, with levels A, AA, and AAA — most sites aim for AA. I'd recommend getting an accessibility expert to review, but there's a lot you can check yourself.
WCAG 2.2 ACCESSIBILITY AUDIT REPORT
SCAN RESULTS: 43 violations found (18 critical, 15 moderate, 10 low-priority)
Compliance level: Currently "Partial A" → Can reach "AA" with fixes below
CRITICAL VIOLATIONS (Fix immediately; affects legal compliance)
→ CONTRAST FAILURES (8 issues)
• Navigation text: #666 on #f5f5f5 (ratio 4.2:1, need 7:1 for AA)
Fix: Change text to #333 (ratio 12:1) ✓ Code: color: #333
• Button labels: #999 on light gray (ratio 3.1:1, need 4.5:1)
Fix: Change to #555 (ratio 6.8:1) ✓
→ MISSING ALT TEXT (6 issues)
• 4 images in carousel have empty alt="" attributes
Fix: Add descriptive alt text ("Customer dashboard showing metrics" vs "image1.png") ✓
• Hero background image (decorative)
Fix: Set role="presentation" (skip from screen reader) ✓
→ FORM ACCESSIBILITY (4 issues)
• Email input missing associated <label> tag
Fix: Add <label for="email">Your email</label> ✓
• Search input lacks visible focus indicator
Fix: Add CSS :focus { outline: 2px solid blue; outline-offset: 2px; } ✓
MODERATE VIOLATIONS (Should fix within 2 weeks)
→ HEADING STRUCTURE (5 issues)
• Missing h1 tag on homepage (jumps from <title> to <h2>)
Fix: Add h1 with page title
• h3 used before h2 in sidebar (logical hierarchy broken)
Fix: Renumber to h2, h3, h4 in correct order
→ KEYBOARD NAVIGATION (4 issues)
• Modal dialog: Tab focus escapes outside dialog (should loop inside)
Fix: Implement focus trap (JS library: focus-trap) ✓
• Dropdown menu: Arrow keys don't navigate items
Fix: Add keyboard event listeners for ArrowUp/ArrowDown ✓
→ LINK TEXT (3 issues)
• 12 instances of "Click here" links (non-descriptive)
Fix: "Click here to view pricing" → "View pricing" ✓
• Icon-only buttons (e.g., X to close) missing aria-label
Fix: Add <button aria-label="Close dialog">×</button> ✓
LOW-PRIORITY (Nice-to-have; won't block compliance)
• Captions on 3 embedded videos (recommended)
• Adjustable text size option (exceeds AA; AAA feature)
• Focus visible indicator on links (recommended on all interactive elements)
TESTING CHECKLIST
☑ Screen reader (NVDA or JAWS): Page flow, form labels, alt text readable
☑ Keyboard only: Tab through entire page; all buttons/links reachable
☑ Color blindness simulator: Check contrast without relying on color alone
☑ Mobile accessible: Test on real device; zoom to 200%; still usable
TIMELINE
→ Week 1: Fix critical (contrast, alt text, form labels) = 2-4 hours dev time
→ Week 2: Fix moderate (heading structure, keyboard nav) = 4-6 hours dev time
→ Week 3: Test + refinement = 2 hours
COMPLIANCE CONFIDENCE: 98% AA after fixes; no legal risk post-remediation
RESCAN RECOMMENDED: 30 days after fixes applied (automated + manual spot-check)About this skill
Your Lighthouse score says 100, but a keyboard user still can't get out of the checkout modal, and a screen reader says nothing when the form fails. Most accessibility audits either dump raw axe output or hand you a generic checklist. This skill audits your app the way a conformance tester does: by user task and UI state, mapped to exact WCAG 2.2 success criteria, with fixes written for your framework.
What it does
- Audits each flow (sign-in, checkout, search) in every state, including modal open, error shown, and loading, instead of only scanning the page at load
- Maps every finding to the exact WCAG 2.2 success criterion and level, and labels true failures separately from best-practice advice
- Catches the WCAG 2.2 additions older checklists miss: target size, focus not obscured, dragging alternatives, redundant entry, and accessible authentication
- Writes fixes in your framework's idiom (JSX, Vue templates, Angular templates, Svelte, plain HTML) and prefers native elements over added ARIA
- Sets up regression gates: lint rules for your framework, component-level axe tests, and Playwright plus axe runs against key states, with a baseline so existing debt doesn't block every PR
- Lists what automation cannot verify and gives exact manual test steps for each item
What you get
A findings table sorted by severity, with the success criterion, file location, user impact, a code fix, and how to verify each fix. You also get a list of manual checks still open and, when you ask for it, a ready-to-paste CI test setup.
Best for
Frontend engineers and tech leads preparing for an accessibility review, responding to a user complaint or legal demand letter, or trying to stop accessibility regressions in a React, Next.js, Vue, Angular, or Svelte codebase.
SKILL.md preview
---
name: wcag-aa-codebase-audit-fix-ci-gate
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.