메뉴
Use when auditing a web interface for WCAG 2.2 AA/AAA compliance, fixing reported accessibility violations, verifying ARIA usage, checking keyboard navigation or color contrast, or preparing accessibility documentation for a release.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | accessibility-audit |
| description | Use when auditing a web interface for WCAG 2.2 AA/AAA compliance, fixing reported accessibility violations, verifying ARIA usage, checking keyboard navigation or color contrast, or preparing accessibility documentation for a release. |
| metadata | {"references":["references/aria-patterns.md","references/contrast-guide.md","references/inclusive-design.md","references/keyboard-nav-guide.md","references/wcag-checklist.md"]} |
Run all three. Each catches different issues.
# axe-core CLI (most accurate rule coverage)
npx @axe-core/cli https://example.com --tags wcag2a,wcag2aa,wcag22aa --save axe-report.json
# pa11y (CI-friendly, exits non-zero on failures)
npx pa11y --standard WCAG2AA --reporter json https://example.com > pa11y-report.json
# Lighthouse (accessibility category)
npx lighthouse https://example.com --only-categories=accessibility --output=json --output-path=lh-report.json --chrome-flags="--headless"
Expected axe output shape:
{"violations":[{"id":"color-contrast","impact":"serious","nodes":[{"target":["#cta-btn"],"failureSummary":"..."}]}]}
Checkpoint: If axe reports any impact: "critical" or impact: "serious" violations, fix before proceeding to Step 2. Lighthouse accessibility score must be ≥ 95.
Tab through the entire flow. For each interactive element verify: receives focus, has visible focus ring, responds to Enter/Space, no traps, Escape closes overlays, focus restores on close.
Pass/fail: Every interactive element reachable and operable with keyboard only. Skip link present and works on first Tab.
Test critical flows with VoiceOver (macOS: Cmd+F5) or NVDA (Windows). Verify each control announces role + name + state. Verify form errors are announced via aria-live or role="alert". Verify dynamic updates reach the user.
Pass/fail: No control announces as "button" with no name. No silent state changes on submit/error.
Pass/fail: Text ≥ 4.5:1, large text ≥ 3:1, UI components ≥ 3:1, focus indicators ≥ 3:1 against adjacent colors.
Link text descriptive (no "click here"), <html lang> set, error messages identify the field and suggest a fix, captions on video, alt on images (alt="" if decorative).
Use this table format for the report:
| # | WCAG SC | Severity | Location | Issue | Fix | Status |
|---|---------|----------|----------|-------|-----|--------|
| 1 | 1.4.3 Contrast (Min) | Critical | /pricing #cta-btn | 3.2:1 white on #6FA8DC | Use #1A5490 (8.1:1) | Open |
| 2 | 2.4.7 Focus Visible | Serious | global `button:focus { outline: none }` | No focus indicator | Add `:focus-visible { outline: 2px solid var(--focus) }` | Fixed |
| 3 | 4.1.2 Name/Role/Value | Critical | header search icon button | No accessible name | Add `aria-label="Search"` | Open |
| # | Failure | Quick Fix |
|---|---|---|
| 1 | Missing alt text | Add descriptive alt; alt="" for decorative |
| 2 | Low contrast text | Raise to ≥ 4.5:1 (normal) / 3:1 (large) |
| 3 | Missing form labels | <label for="id"> matching input id |
| 4 | No keyboard access | Native <button>/<a>, or tabindex="0" + key handlers |
| 5 | No focus indicator | Never strip outline without :focus-visible replacement |
| 6 | ARIA misuse | Prefer semantic HTML; ARIA only when no native equivalent |
| 7 | Auto-playing media | Provide pause; respect prefers-reduced-motion |
| 8 | Skipped heading levels | H1 → H2 → H3, never skip |
| 9 | Color-only signaling | Add icon, text, or pattern alongside color |
| 10 | Inaccessible custom controls | Follow WAI-ARIA Authoring Practices |
Automation catches ~30% of WCAG issues. The rest needs human judgment.
| Automation catches | Manual required |
|---|---|
| Missing alt, invalid ARIA, duplicate IDs, contrast ratios, missing labels | Alt-text quality, focus order, screen-reader narration, cognitive clarity, dynamic announcement, touch-target adequacy |