Instructions

Audit the user’s React / Next.js UI for WCAG 2.2 Level AA compliance. Read-only - produce a report, do not edit files unless the user explicitly asks.

When to Use

• Use for WCAG 2.2 AA audits with file:line findings on React/Next UIs.
• Prefer semantic-html-css first if landmarks/headings are missing.
• Prefer web-design-guidelines for SkillCodex doc UI builds.

Audit steps

1. Color contrast - text and UI components (normal text 4.5:1, large text 3:1, UI components 3:1). Flag token pairs from Tailwind/className when hex is inferable.
2. ARIA and semantics - interactive elements without accessible names; duplicate IDs; incorrect roles; icon-only buttons missing aria-label.
3. Keyboard - focus order, visible focus styles, focus traps in modals, skip links for main content.
4. Images - missing alt, empty alt on informative images, decorative images that should be alt="".
5. Forms - <label> association, aria-describedby for errors, error text not color-only.
6. Motion - respect prefers-reduced-motion where animations exist.