Accessibility Audit

--- name: accessibility-audit description: "Audit UI code for WCAG compliance"

Issue 2: ...

Serious Issues

These issues create significant barriers for some users.

Issue 3: ...

Moderate Issues

These issues may cause difficulty for some users.

Issue 4: ...

Minor Issues

These are best practice improvements.

Issue 5: ...

Passed Criteria

The following WCAG criteria passed:

Recommendations

Quick Wins (< 1 hour each)

1. {Quick fix 1}
2. {Quick fix 2}

Medium Effort (1-4 hours each)

1. {Medium fix 1}
2. {Medium fix 2}

Significant Effort (> 4 hours)

1. {Larger fix 1}

Testing Resources

Automated Testing

Add these tests to catch regressions:

// Example jest-axe test
import { axe, toHaveNoViolations } from "jest-axe";

expect.extend(toHaveNoViolations);

test("component has no accessibility violations", async () => {
  const { container } = render(<Component />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Manual Testing Checklist

• Navigate entire page using only keyboard
• Test with screen reader (VoiceOver/NVDA)
• Zoom to 200% and verify usability
• Test with high contrast mode
• Verify focus indicators are visible
• Test with prefers-reduced-motion

Recommended Tools

• axe DevTools browser extension
• WAVE Web Accessibility Evaluator
• Lighthouse accessibility audit
• Color contrast analyzers

Generated by UI Design Accessibility Audit WCAG Reference: https://www.w3.org/WAI/WCAG21/quickref/

## Completion

Update `audit_state.json`:

```json
{
  "status": "complete",
  "completed_at": "ISO_TIMESTAMP",
  "compliance_status": "needs_improvement",
  "issues_found": {
    "critical": 2,
    "serious": 5,
    "moderate": 8,
    "minor": 3
  }
}

Display summary:

Accessibility Audit Complete!

Target: {target}
WCAG Level: {level}
Compliance Status: {status}

Issues Found:
  - {n} Critical (must fix)
  - {n} Serious
  - {n} Moderate
  - {n} Minor

Full report: .ui-design/audits/{audit_id}.md

What would you like to do next?
1. View details for critical issues
2. Start fixing issues (guided)
3. Generate automated tests
4. Export report for stakeholders
5. Audit another component

Enter number:

Guided Fix Mode

If user selects "Start fixing issues":

Let's fix accessibility issues starting with critical ones.

Issue 1 of {n}: {Issue Title}
WCAG {criterion}: {criterion_name}
Location: {file}:{line}

{Show current code}

The fix is:
{Explain the fix}

Should I:
1. Apply this fix automatically
2. Show me the fixed code first
3. Skip this issue
4. Stop fixing

Enter number:

Apply fixes one at a time, re-validating after each fix.

Error Handling

• If file not found: Suggest alternatives, offer to search
• If not UI code: Explain limitation, suggest correct target
• If color extraction fails: Note in report, suggest manual check
• If audit incomplete: Save partial results, offer to resume

Output Format

<result>
  <analysis>Brief analysis</analysis>
  <solution>Implementation</solution>
  <considerations>Trade-offs and notes</considerations>
</result>