Accessibility Audit Skill (WCAG 2.1 AA)

Comprehensive web accessibility audit following WCAG 2.1 Level AA guidelines.

When to Activate

• User mentions "접근성", "a11y", "accessibility", "WCAG"
• Reviewing forms, navigation, or interactive components
• Before release accessibility verification

Audit Checklist

1. Perceivable

Text Alternatives

• All <img> have meaningful alt attributes
• Decorative images use alt="" or aria-hidden="true"
• Icon buttons have aria-label

Color Contrast

• Normal text: 4.5:1 ratio
• Large text (18px+): 3:1 ratio
• UI components: 3:1 ratio
• Information not conveyed by color alone

Content Structure

• Heading levels sequential (h1 → h2 → h3)
• Landmark roles (<header>, <nav>, <main>, <footer>)
• Lists use <ul>, <ol>, <dl>

2. Operable

Keyboard Access

• All interactive elements Tab-accessible
• Logical focus order
• No keyboard traps (except modals)
• Skip links available

Focus Indication

• Focus states visually clear
• Pattern: focus-visible:ring-2 focus-visible:ring-ring
• Proper :focus-visible vs :focus usage

Touch Targets

• Minimum 44x44px (iOS) / 48x48dp (Android)
• 8px+ spacing between targets

3. Understandable

Form Labels

• All inputs have associated <label> (htmlFor)
• Error messages linked to input fields
• Required fields marked (aria-required)

Error Handling

• Error messages use role="alert" or aria-live="polite"
• Focus moves to error on occurrence
• NO alert() usage → use toast or inline errors

4. Robust

ARIA Usage

• aria-label: name for unlabeled elements
• aria-describedby: additional descriptions
• aria-expanded: expand/collapse state
• aria-current: current location in navigation
• aria-hidden: hide decorative elements

Dynamic Content

• aria-live regions for updates
• aria-busy for loading states

Report Format

# ♿ Accessibility Audit Report

## Summary
- **WCAG 2.1 AA Compliance**: X%
- **Critical Issues**: N
- **Warnings**: N

## Violations

### [Critical] 1.4.3 Color Contrast
- **Location**: file:line
- **Current**: 3.2:1
- **Required**: 4.5:1
- **Fix**: `text-gray-600` → `text-gray-700`

## Passed Checks
[List of passed items]

## Recommendations
[Optional improvements]

Resources

• WCAG 2.1 Quick Reference
• WebAIM Contrast Checker
• ARIA Authoring Practices