메뉴
Accessibility audit of UI code or a running site against WCAG 2.1 AA. Walks every WCAG criterion that maps to common patterns: keyboard reach, focus visibility, contrast, semantic HTML, ARIA, labels, alt text, motion, screen-reader sense. Severity-graded with code fixes.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | a11y-audit |
| description | Accessibility audit of UI code or a running site against WCAG 2.1 AA. Walks every WCAG criterion that maps to common patterns: keyboard reach, focus visibility, contrast, semantic HTML, ARIA, labels, alt text, motion, screen-reader sense. Severity-graded with code fixes. |
Walk a UI for accessibility issues against WCAG 2.1 Level AA — the legal bar in most jurisdictions and the right bar everywhere. Output is a severity-graded list with concrete code fixes, not a generic "improve accessibility" lecture.
/path/to/component.tsx), a route URL, a running app, or all of the above.Whenever feasible:
lhci).html-validate on rendered output to catch invalid markup that screen readers misinterpret.Capture the output. The automated tools catch ~30% of issues — necessary but not sufficient.
These are the criteria that come up in 90% of audits. Walk each that applies.
1.1.1 Non-text Content (A)
alt. Decorative images have alt="".aria-label or accompanying text.1.3.1 Info and Relationships (A)
<label for=…> or aria-labelledby.<th> with scope.<ul> / <ol>, not styled <div>s.1.3.2 Meaningful Sequence (A)
order does NOT change reading order for screen readers).1.3.5 Identify Input Purpose (AA)
autocomplete attribute.1.4.1 Use of Color (A)
1.4.3 Contrast Minimum (AA)
1.4.4 Resize Text (AA)
1.4.10 Reflow (AA)
1.4.11 Non-text Contrast (AA)
1.4.12 Text Spacing (AA)
1.4.13 Content on Hover or Focus (AA)
2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.1.4 Character Key Shortcuts (A)
2.4.1 Bypass Blocks (A)
<main>, <nav>, <aside>).2.4.2 Page Titled (A)
<title>.2.4.3 Focus Order (A)
2.4.4 Link Purpose (A)
2.4.6 Headings and Labels (AA)
2.4.7 Focus Visible (AA)
outline: none without a replacement ring.2.5.5 Target Size (AAA but worth checking) → 2.5.8 Target Size Minimum (AA in 2.2)
3.1.1 Language of Page (A)
<html lang="en"> (or correct ISO code).3.1.2 Language of Parts (AA)
<span lang="fr">déjà vu</span>.3.2.1 On Focus (A)
3.2.2 On Input (A)
3.3.1 Error Identification (A)
3.3.2 Labels or Instructions (A)
3.3.3 Error Suggestion (AA)
3.3.4 Error Prevention (Legal, Financial, Data) (AA)
4.1.2 Name, Role, Value (A)
<button>) over <div role="button"> whenever possible.4.1.3 Status Messages (AA)
aria-live.Beyond per-criterion walkthrough, check these patterns:
div that responds to clicks should be a button instead.If auditing a running app, use a screen reader for at least one critical flow:
Listen to: page title, landmarks, headings, link list, form fields, error messages. If the experience makes no sense, the audit isn't done.
## Scope
- Target: <files / routes>
- WCAG level: 2.1 AA
- Tools used: axe-core, Lighthouse, manual VoiceOver walk on /signup, /checkout
## Verdict: PASS | CONDITIONAL | FAIL
## Findings (severity-ordered)
### Critical (N)
1. **No keyboard access to "Add to cart" button** (WCAG 2.1.1).
- File: `src/components/ProductCard.tsx:42`
- Issue: `<div onClick={...}>` instead of `<button>`. Not reachable by Tab.
- Fix:
```tsx
// Before
<div className="add-btn" onClick={handleAdd}>Add to cart</div>
// After
<button type="button" className="add-btn" onClick={handleAdd}>Add to cart</button>
```
2. **Modal traps focus on screen readers** (WCAG 2.4.7, 4.1.2).
- File: `src/components/Modal.tsx:18`
- Issue: …
- Fix: use `react-focus-lock` or implement focus trap manually.
### High (N)
…
### Medium (N)
…
### Low (N)
…
## Patterns audited
- [x] Modals — 2 issues
- [x] Forms — 4 issues
- [x] Color contrast — 1 issue
- [x] Keyboard navigation — 3 issues
- [x] Focus visibility — 1 issue
- [x] Skip link — missing
- [x] Heading hierarchy — clean
- [x] Alt text — 2 missing
## Screen reader walk
- [x] /signup with VoiceOver — 1 issue (form errors not announced)
- [x] /checkout with VoiceOver — 0 issues
## Recommended next moves
1. Fix all Critical (1 day).
2. Fix High in priority order (1 week).
3. Add axe-core to CI to catch regressions.
4. Schedule a screen-reader walk per release for top 3 flows.
Comprehensive business-logic blueprint for SaaS, ERP, e-commerce, and marketplace applications. Walks through every domain (auth, billing, multi-tenancy, inventory, audit, compliance, etc.), surfaces the edge cases that actually break in production, and proposes a concrete plan tailored to the user's context.
Reviews existing business code (billing, multi-tenancy, state machines, inventory, GL postings, audit logs, etc.) for missing real-world edge cases. Severity-graded findings — invariant violations, race conditions, missing idempotency, currency precision bugs, audit gaps, jurisdiction issues.
Research how 2–4 mature competitors solve a specific business problem (billing, RBAC, search, onboarding, multi-tenancy, etc.) and produce a side-by-side comparison so the team can pick the right approach for their context. Uses web search + scraping; cites every source.
Designs an end-to-end user flow before any pixels are drawn — entry point, screens, decisions, branches, error/recovery paths, edge cases, microcopy hooks. Outputs a structured spec engineering and design can build from.
Writes or reviews UX copy — button labels, error messages, empty states, success messages, tooltips, form labels, onboarding text, confirmation dialogs. Voice-consistent, action-led, recovery-oriented. Localizable. No dark patterns.
Generates textual or ASCII wireframes for screens, layouts, and information architecture. Pixel-free; focused on structure, hierarchy, and component placement. Output is reviewable in a PR diff and translates directly to component code.