ss-a11y

Audit a component or page for accessibility issues and fix them

By bitjaru · 743 installs

npx skills add bitjaru/styleseed --skill ss-a11y

Source repository · Upstream listing

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 ) 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 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 Token Minimum Contrast Note foreground 7:1+ Body text — verify with your skin muted foreground 4.5:1+ Secondary text — verify with your skin brand 4.5:1+ Accent — verify with your skin's brand color destructive 4.5:1+ Error — verify with your skin success 3:1+ Large text/icons only — verify with your skin warning 4.5:1+ Warning text — some skins need a darker variant 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