Ss A11y

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/<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.

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 <img> 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) on touch surfaces
• Flag undersized touch hit areas, not approved pointer-first desktop controls merely for being 36–40px tall
• Pointer-first controls follow the resolved contract; preserve keyboard access and applicable accessibility floors
• Icon buttons need an explicit hit area appropriate to the input mode
• 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: <html lang="en"> (or appropriate language code for your project)

4. Robust

• Semantic HTML: Use appropriate elements (<button>, <nav>, <main>, <header>)
• ARIA: Use Radix UI components (they handle ARIA automatically)
• Roles: Custom interactive elements need proper role attributes

Design System Token Reference

Output

1. Issues found: List with severity (Critical/Major/Minor)
2. Auto-fixes: Apply fixes directly where possible
3. Manual review needed: Flag items that need human judgment