---
name: a11y-audit
description: Run a WCAG 2.2 AA accessibility audit on a component or page. Checks semantic HTML, ARIA, keyboard navigation, color contrast, and screen reader compatibility.
disable-model-invocation: true
argument-hint: "[file-or-directory]"
context: fork
agent: frontend-architect
---

# Accessibility Audit

Audit `$ARGUMENTS` for WCAG 2.2 Level AA compliance.

## Steps

1. **Read the target code** — understand the component/page structure
2. **Check against this checklist:**

### Semantic HTML
- [ ] Correct heading hierarchy (h1 → h2 → h3, no skips)
- [ ] Landmark elements used (`nav`, `main`, `aside`, `footer`)
- [ ] Lists use `ul`/`ol`/`li`, not styled divs
- [ ] Buttons are `<button>`, links are `<a>`, not divs with onClick

### ARIA
- [ ] Interactive elements have accessible names (label, aria-label, aria-labelledby)
- [ ] Form inputs have associated labels
- [ ] Dynamic content updates use `aria-live` regions
- [ ] Decorative images have `aria-hidden="true"` or empty alt
- [ ] No redundant ARIA (e.g., `role="button"` on `<button>`)

### Keyboard
- [ ] All interactive elements are focusable and operable via keyboard
- [ ] Focus order follows visual order
- [ ] Focus is trapped in modals/dialogs
- [ ] Skip-to-content link present (page-level)
- [ ] No keyboard traps

### Visual
- [ ] Text contrast ratio >= 4.5:1 (normal), >= 3:1 (large)
- [ ] Focus indicators visible on all interactive elements
- [ ] `prefers-reduced-motion` respected for animations
- [ ] `prefers-color-scheme` supported if applicable
- [ ] Content readable at 200% zoom

### States
- [ ] Loading states announced (`aria-busy`)
- [ ] Error messages programmatically associated with inputs (`aria-describedby`)
- [ ] Disabled states use `disabled` attribute, not just styling

3. **Report format:**

```
## Accessibility Audit: [component/file name]

### Issues Found
1. [CRITICAL/HIGH/MEDIUM/LOW] — description + file:line + fix

### Passes
- [What's done well]

### Recommendations
- [Improvements beyond minimum compliance]
```