WCAG User Flow Audit
Audits one user flow (signup, checkout, booking) against WCAG 2.2 AA with manual keyboard and screen reader checks, mapped to criteria.
Before & after
Same prompt, same agent — the only difference is the skill.
Accessibility is important for web apps. You'll want to make sure your site works for people with different abilities. Consider things like screen reader compatibility and keyboard navigation. Color contrast is important for visibility. Make sure text is readable. Test with different browsers and assistive technologies. Provide alt text for images. Think about how your site works without a mouse. There are accessibility guidelines you should follow. Have you tested with any assistive tools?
ACCESSIBILITY AUDIT REPORT: ReactFinance dashboard CRITICAL ISSUES (WCAG 2.1 AA violations, block users): 1. Form inputs lack labels (3 forms affected) Impact: Screen reader users cannot identify fields Fix: Add <label htmlFor='input_id'> to every input (30min) Test: Voice Over (Mac), NVDA (Windows) 2. Color-only status indicators (red=error, green=success) Impact: Colorblind users (8% of male population) miss warnings Fix: Add text labels + icons (45min) Affected components: TransactionStatus, AlertBanner, FormError 3. Keyboard trap: Modal dialog (tab cannot escape) Impact: Keyboard-only users stuck Fix: Trap focus within modal, return to trigger on Escape (20min) MAJOR ISSUES (degraded experience, not blockers): • Heading hierarchy broken (h1 → h4, skips h2/h3) → reorder (1hr) • Link text 'Click here' not descriptive → use action verbs (30min) • Images missing alt text (8 charts, 4 avatars) → add descriptions (45min) MINOR ISSUES (nice-to-have): • Increase touch target size from 32px to 44px (larger fingers) • Add focus outline (currently invisible) TIME TO AA COMPLIANCE: 4 hours RECOMMENDED SEQUENCE: Fix critical → major → minor
About this skill
Automated scanners catch a fraction of accessibility issues. This skill walks one critical flow the way keyboard and screen reader users do, and tells you whether they can actually finish it.
What it does
- Maps every screen and state in the flow, including errors and modals
- Runs 17 check areas mapped to WCAG 2.2 success criteria, including the new 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 and 3.3.8
- Rates each finding Blocker, Serious, Moderate, or Minor
- Lists what cannot be verified with the access provided instead of guessing
- Writes a keyboard-only retest script
What you get
A flow audit report with a completable/blocked verdict, a findings table (step, element, issue, criterion, severity, fix), quick wins, and a retest script.
Best for
Product and frontend teams responding to an accessibility complaint, or checking a revenue-critical flow before launch or a legal review.
SKILL.md preview
---
name: wcag-user-flow-audit
description: Audit one user flow (signup, checkout, booking, a settings form) step by step against WCAG 2.2 Level A and AA, using the manual checks automated scanners miss - keyboard path, focus, screen reader announcements, errors, target size, authentication - and return a findings table mapped to success criteria with severity and fixes. Use when the user says "is our checkout accessible?", "audit this flow for WCAG", "we got an accessibility complaint about signup", or shares screenshots, a URL, or markup for one journey. Also triggers on "is this form accessible?", "quick a11y check on this modal", or "a screen reader user can't get through our signup".
… (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.