‹ 首页

ss-a11y

@bitjaru · 收录于 1 周前 · 上游提交 昨天

Audit a component or page for accessibility issues and fix them

场景上线前检查无障碍合规

适合你，如果需要在发布前确保页面无障碍达标

/ 下载安装
ss-a11y.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add bitjaru/styleseed/ss-a11y
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitjaru/styleseed/ss-a11y
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify bitjaru/styleseed/ss-a11y
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
779GitHub stars
~649上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 7af957e

Accessibility Audit

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 ```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

| 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
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…