ss-a11y

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

通用设计系统合规审查 → 使用
```
/ss-review
```
Nielsen UX 启发式评估 → 使用
```
/ss-audit
```
非 StyleSeed 代码（无
```
data-slot
```
、无语义令牌）—— 本工具基于 StyleSeed 规范设计
运行时测试 —— 这是静态代码审计，并非屏幕阅读器模拟

目标：$ARGUMENTS

Audit Criteria

审计标准

WCAG 2.2 AA Compliance

WCAG 2.2 AA 合规性

1. Perceivable

1. 可感知性

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)

颜色对比度：文本必须达到4.5:1（常规文本）或3:1（大字号/粗体文本）
- 检查
```
text-muted-foreground
```
  （#717182）在
```
bg-background
```
  （#FFFFFF）上的对比度 = 4.6:1（通过）
- 检查
```
text-brand
```
  在白色背景上的对比度（请根据你的皮肤品牌色验证）
- 标记所有不符合对比度要求的自定义颜色
非文本对比度：UI控件/图形必须达到3:1
文本替代方案：所有
```
<img>
```
标签需要
```
alt
```
属性，有意义的图标需要
```
aria-label
```
属性
颜色独立性：不能仅通过颜色传递信息（需添加图标/文本）

2. Operable

2. 可操作性

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;
  }
}

触摸目标：最小尺寸为44x44px（
```
min-h-11 min-w-11
```
）
- 常见违规：
```
h-9
```
  （36px）按钮 —— 应改为
```
h-11
```
- 图标按钮需要明确设置尺寸：
```
w-11 h-11
```
键盘导航：所有交互元素必须支持键盘访问
- Tab键顺序应符合逻辑
- 添加
```
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
```
  样式

动画：动画必须尊重

prefers-reduced-motion

设置

css

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

3. Understandable

3. 可理解性

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)

标签：表单输入项必须有可见标签或
```
aria-label
```
属性
错误提示：表单错误必须通过
```
aria-describedby
```
进行程序化关联
语言：设置
```
<html lang="en">
```
（或项目对应的合适语言代码）

4. Robust

4. 健壮性

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

语义化HTML：使用合适的元素（
```
<button>
```
、
```
<nav>
```
、
```
<main>
```
、
```
<header>
```
）
ARIA：使用 Radix UI 组件（它们会自动处理ARIA属性）
角色：自定义交互元素需要设置正确的
```
role
```
属性

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

令牌	最低对比度	说明
`--foreground`	7:1+	正文文本 —— 请根据你的皮肤验证
`--muted-foreground`	4.5:1+	次要文本 —— 请根据你的皮肤验证
`--brand`	4.5:1+	强调色 —— 请根据你的皮肤品牌色验证
`--destructive`	4.5:1+	错误色 —— 请根据你的皮肤验证
`--success`	3:1+	仅适用于大字号文本/图标 —— 请根据你的皮肤验证
`--warning`	4.5:1+	警告文本 —— 部分皮肤需要更深的变体

Output

输出内容

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

发现的问题：列出问题及严重程度（严重/主要/次要）
自动修复：在可能的情况下直接应用修复
需人工审核项：标记需要人工判断的内容