ui-a11y

name	ui-a11y
description	Audit a component or page for accessibility issues and fix them
risk	unknown
source	https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-a11y
source_repo	bitjaru/styleseed
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/bitjaru/styleseed/blob/main/LICENSE

Accessibility Audit

When to Use

Use this skill when you need audit a component or page for accessibility issues and fix them.

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

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms ;
      :  ;
    }
  }