--- name: Accessibility Audit slug: accessibility-audit-5 category: Quality description: Accessibility Audit checks a component or page for WCAG 2.2 AA issues and suggests or applies fixes. Use it for static audits of contrast, labels, focus states, semantics, and other accessibility problems. github: "https://github.com/bitjaru/styleseed/tree/main/skills/ss-a11y" language: TypeScript stars: 906 forks: 82 install: "npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-a11y ~/.claude/skills/ss-a11y" installs_to: ~/.claude/skills/ss-a11y source_path: skills/ss-a11y/SKILL.md collection_size: 23 category_size: 1354 collection_url: "https://dirskills.com/collections/bitjaru/styleseed" added: 2026-08-22T05:21:03.726Z last_synced: 2026-08-22T05:21:03.726Z canonical_url: "https://dirskills.com/skills/accessibility-audit-5" --- # Accessibility Audit Accessibility Audit checks a component or page for WCAG 2.2 AA issues and suggests or applies fixes. Use it for static audits of contrast, labels, focus states, semantics, and other accessibility problems. **Install:** ```bash npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-a11y ~/.claude/skills/ss-a11y ``` ## README # Accessibility Audit ## Registry-first artifact boundary When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/.md` and `.styleseed/manifests/.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists. ## When NOT to use - For general design system compliance review → use `/ss-review` - For Nielsen UX heuristics → use `/ss-audit` - For non-StyleSeed code (no `data-slot`, no semantic tokens) — assumes StyleSeed conventions - For runtime testing — this is a static code audit, not a screen-reader simulation Target: **$ARGUMENTS** ## Audit Criteria ### WCAG 2.2 AA Compliance #### 1. Perceivable - **Color contrast**: Text must meet 4.5:1 (normal) or 3:1 (large/bold text) - Check `text-muted-foreground` (#717182) on `bg-background` (#FFFFFF) = 4.6:1 (passes) - Check `text-brand` on white (verify contrast with your skin's brand color) - Flag any custom colors that don't meet ratio - **Non-text contrast**: UI controls/graphics must meet 3:1 - **Text alternatives**: All `` need `alt`, icons need `aria-label` when meaningful - **Color independence**: Don't convey info by color alone (add icons/text) #### 2. Operable - **Touch targets**: Minimum 44x44px (`min-h-11 min-w-11`) - Common violation: `h-9` (36px) buttons — should be `h-11` - Icon buttons need explicit size: `w-11 h-11` - **Keyboard navigation**: All interactive elements must be keyboard-accessible - Tab order should be logical - `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2` - **Motion**: Animations must respect `prefers-reduced-motion` ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` #### 3. Understandable - **Labels**: Form inputs must have visible labels or `aria-label` - **Error messages**: Form errors must be programmatically associated (`aria-describedby`) - **Language**: `` (or appropriate language code for your project) #### 4. Robust - **Semantic HTML**: Use appropriate elements (`