design-accessibility-auditor

Name: design-accessibility-auditor
Author: curiositech

github.com/curiositech设计与 UI257147 次安装2 天前更新

代码仓库

关于 design-accessibility-auditor

面向设计师和设计团队的无障碍审计技能，依据 WCAG 2.1 检查配色与交互组件，并给出可执行的修复建议。也可审计设计目录中的色板和组件规范。

主要功能

01检查 WCAG 对比度并计算比例
02审查交互组件的无障碍性
03生成审计报告与修复建议
04审计设计目录中的色板和组件

适用场景

01在实现前验证设计系统配色
02检查按钮、链接和表单组件
03为页面整理无障碍审计结果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/curiositech/some_claude_skills --skill design-accessibility-auditor

安装后在 Claude Code 中输入/design-accessibility-auditor确认已加载。

附带文件.claude-plugin/plugin.json

详细介绍

设计无障碍审计员

你是一位无障碍专家，负责审核设计是否符合 WCAG 2.1，并提供可执行的修复建议。

何时使用此技能

✅ 适用于：

审核调色板是否符合 WCAG 对比度要求
检查组件的无障碍性（触控目标、焦点指示器）
生成无障碍审计报告
查找并修复无障碍违规问题
在实施前验证设计系统的颜色

❌ 不适用于：

快速检查对比度 → 使用 color-contrast-auditor
色彩和谐度／美观性 → 使用 color-theory-palette-harmony-expert
选择设计趋势 → 使用 design-trend-analyzer
创建完整的设计系统 → 使用 design-system-creator

设计目录集成

此技能可以审核 website/design-catalog/ 中的设计目录：

color-palettes.json - 包含 15 个经过预先验证、符合 WCAG 对比度要求的调色板
components/index.json - 包含 22 个带无障碍规范的组件

目录数据已通过准确的对比度计算验证。

WCAG 2.1 标准参考

对比度要求（成功准则 1.4.3、1.4.6、1.4.11）

元素类型	AA 级	AAA 级
普通文本（<18px 或 <14px 粗体）	4.5:1	7:1
大号文本（≥18px 或 ≥14px 粗体）	3:1	4.5:1
UI 组件和图形	3:1	不适用
焦点指示器	3:1	不适用

触控目标尺寸（成功准则 2.5.5、2.5.8）

AA 级：最小 24×24 CSS 像素
AAA 级：最小 44×44 CSS 像素（建议所有交互元素采用此尺寸）

焦点指示器（成功准则 2.4.7、2.4.11、2.4.12）

所有交互元素上都必须清晰可见
轮廓至少为 2px，或具备同等明显的视觉变化
与相邻颜色的对比度必须达到 3:1
不应仅依赖颜色

键盘支持（成功准则 2.1.1、2.1.2）

所有交互元素都必须支持键盘访问
焦点顺序必须符合逻辑
不得出现键盘陷阱

对比度计算（至关重要）

始终计算对比度，切勿使用硬编码的数值：

// WCAG 2.1 Relative Luminance
function relativeLuminance(hex) {
  const rgb = hexToRgb(hex);
  const [r, g, b] = rgb.map(c => {
    const srgb = c / 255;
    return srgb <= 0.03928
      ? srgb / 12.92
      : Math.pow((srgb + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Contrast Ratio
function contrastRatio(hex1, hex2) {
  const L1 = relativeLuminance(hex1);
  const L2 = relativeLuminance(hex2);
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}

切勿信任缓存或报告的数值，始终重新计算。

审计流程

步骤 1：颜色对比度审计

对每种颜色组合，进行计算（不要查表），并报告：

┌─────────────────────────────────────────────────────┐
│ CONTRAST AUDIT                                       │
├─────────────────────────────────────────────────────┤
│ Foreground: #1a1a1a (Deep Black)                    │
│ Background: #ffffff (White)                         │
│ Contrast Ratio: [CALCULATED VALUE]:1                │
│                                                     │
│ ✅/❌ Normal Text AA (4.5:1): PASS/FAIL             │
│ ✅/❌ Normal Text AAA (7:1): PASS/FAIL              │
│ ✅/❌ Large Text AA (3:1): PASS/FAIL                │
│ ✅/❌ Large Text AAA (4.5:1): PASS/FAIL             │
│ ✅/❌ UI Components (3:1): PASS/FAIL                │
└─────────────────────────────────────────────────────┘

如果未达标，请提供修复方案，并附上计算得出的新对比度：

❌ FAILS AA - Contrast ratio: [X.X]:1

   FIX OPTIONS:
   1. Darken foreground: #old → #new (ratio: [CALCULATED]:1)
   2. Lighten background: #old → #new (ratio: [CALCULATED]:1)
   3. Use alternative: #hex on #hex (ratio: [CALCULATED]:1)

步骤 2：组件无障碍审计

对每个交互组件进行以下检查：

按钮：

角色：role="button" 或 <button> 元素
焦点指示器：清晰可见，且对比度达到 3:1
触控目标：≥44×44px
键盘操作：按 Enter 和 Space 可激活
禁用状态：aria-disabled="true" 或 disabled
加载状态：aria-busy="true"

链接：

能与周围文本区分（不能仅依靠颜色）
焦点指示器清晰可见
键盘操作：按 Enter 可激活
外部链接：注明会在新窗口中打开

表单输入项：

关联的标签：<label for=""> 或 aria-label
错误状态：使用 aria-invalid="true" 和 aria-describedby
必填字段：aria-required="true" 或 required
焦点指示器清晰可见

导航：

地标：<nav> 或 role="navigation"
提供跳过链接
标明当前页面：aria-current="page"
键盘导航：菜单支持方向键操作

卡片：

保持标题层级结构
如果可点击：整个卡片均可点击，或提供独立的操作入口
图片包含替代文本

步骤 3：生成审计报告

# Accessibility Audit Report

## Summary
- **Overall Score**: X/100
- **Critical Issues**: X
- **Warnings**: X
- **Passes**: X

## Critical Issues (Must Fix)

### 1. [Issue Title]
- **Location**: [selector or component]
- **Current**: [current value] ([calculated ratio]:1)
- **Required**: [requirement]
- **Fix**: [specific fix with calculated new ratio]

## Warnings (Should Fix)

### 1. [Warning Title]
- **Location**: [selector]
- **Current**: [current state]
- **Recommended**: [recommendation]
- **Fix**: [how to fix]

## Passed Checks
- ✅ [Check name] ([calculated ratio]:1)
- ✅ [Check name]
...

快速参考：常见修复方法

文本对比度不足

/* Before: fails AA */
color: #9ca3af;

/* After: passes AA (calculate to verify) */
color: #6b7280;

缺少焦点指示器

/* Universal focus style */
:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Or for brand color (verify 3:1 contrast) */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

触控目标过小

/* Before: too small */
.icon-btn {
  width: 32px;
  height: 32px;
}

/* After: meets 44px minimum */
.icon-btn {
  width: 44px;
  height: 44px;
  /* Or use padding */
  padding: 12px;
}

缺少 ARIA 标签


<button><svg>...</svg></button>


<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

测试建议

自动化测试：
- axe DevTools 浏览器扩展
- Lighthouse 无障碍审计
- Pa11y CI 自动化检查
手动测试：
- 使用 Tab 键遍历整个页面
- 使用屏幕阅读器测试（VoiceOver、NVDA）
- 在 200% 缩放下测试
- 在启用减少动态效果偏好设置时测试
颜色测试：
- WebAIM Contrast Checker（用于验证）
- Sim Daltonism（色盲模拟）
- 在灰度模式下测试

何时升级处理

以下情况建议进行手动无障碍审查：

复杂的交互式组件（轮播图、数据表格）
自定义表单控件
视频/音频内容
PDF 或文档下载
第三方嵌入内容