{"id":"ss-a11y","name":"ss-a11y","summary":"コンポーネントやページのアクセシビリティ問題を監査し、修正してください","body":"# Accessibility Audit\n## Registry-first artifact boundary\n\nWhen `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.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.\n\n## When NOT to use\n\n- For general design system compliance review → use `/ss-review`\n- For Nielsen UX heuristics → use `/ss-audit`\n- For non-StyleSeed code (no `data-slot`, no semantic tokens) — assumes StyleSeed conventions\n- For runtime testing — this is a static code audit, not a screen-reader simulation\n\nTarget: **$ARGUMENTS**\n\n## Audit Criteria\n\n### WCAG 2.2 AA Compliance\n\n#### 1. Perceivable\n- **Color contrast**: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)\n  - Check `text-muted-foreground` (#717182) on `bg-background` (#FFFFFF) = 4.6:1 (passes)\n  - Check `text-brand` on white (verify contrast with your skin's brand color)\n  - Flag any custom colors that don't meet ratio\n- **Non-text contrast**: UI controls/graphics must meet 3:1\n- **Text alternatives**: All `<img>` need `alt`, icons need `aria-label` when meaningful\n- **Color independence**: Don't convey info by color alone (add icons/text)\n\n#### 2. Operable\n- **Touch targets**: Minimum 44x44px (`min-h-11 min-w-11`)\n  - Common violation: `h-9` (36px) buttons — should be `h-11`\n  - Icon buttons need explicit size: `w-11 h-11`\n- **Keyboard navigation**: All interactive elements must be keyboard-accessible\n  - Tab order should be logical\n  - `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`\n- **Motion**: Animations must respect `prefers-reduced-motion`\n  ```css\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n      animation-duration: 0.01ms !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n  ```\n\n#### 3. Understandable\n- **Labels**: Form inputs must have visible labels or `aria-label`\n- **Error messages**: Form errors must be programmatically associated (`aria-describedby`)\n- **Language**: `<html lang=\"en\">` (or appropriate language code for your project)\n\n#### 4. Robust\n- **Semantic HTML**: Use appropriate elements (`<button>`, `<nav>`, `<main>`, `<header>`)\n- **ARIA**: Use Radix UI components (they handle ARIA automatically)\n- **Roles**: Custom interactive elements need proper `role` attributes\n\n## Design System Token Reference\n\n| Token | Minimum Contrast | Note |\n|-------|-----------------|------|\n| `--foreground` | 7:1+ | Body text — verify with your skin |\n| `--muted-foreground` | 4.5:1+ | Secondary text — verify with your skin |\n| `--brand` | 4.5:1+ | Accent — verify with your skin's brand color |\n| `--destructive` | 4.5:1+ | Error — verify with your skin |\n| `--success` | 3:1+ | Large text/icons only — verify with your skin |\n| `--warning` | 4.5:1+ | Warning text — some skins need a darker variant |\n\n## Output\n\n1. **Issues found**: List with severity (Critical/Major/Minor)\n2. **Auto-fixes**: Apply fixes directly where possible\n3. **Manual review needed**: Flag items that need human judgment","author":"@bitjaru","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-a11y","license":"MIT","category":"review","lang":"en","tokens":863,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Read","Write","Edit","Grep","Glob"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}