# 无障碍访问检测插件

`无障碍` `WCAG` `Claude插件` `MCP` `颜色对比度`

# AccessLint Claude 插件

一款适用于 Claude Code 和 Claude Desktop 的无障碍工具包，帮助您检查并修复代码库中的 WCAG 2.1 合规性问题。

## 安装

### Claude Code（市场插件）

**通过 CLI：**
```bash
claude plugin marketplace add accesslint/claude-marketplace
claude plugin install accesslint@accesslint
```

**或手动编辑配置文件：**
```json
{
  "plugins": [
    {
      "name": "accesslint",
      "source": {
        "source": "github",
        "repo": "accesslint/claude-marketplace",
        "path": "plugins/accesslint"
      }
    }
  ]
}
```

### Claude Desktop（仅 MCP 服务器）

如果您只需要 Claude Desktop 的颜色对比度分析工具：

```json
{
  "mcpServers": {
    "accesslint": {
      "command": "npx",
      "args": ["-y", "@accesslint/mcp"]
    }
  }
}
```

详情请参阅 [MCP 服务器仓库](https://github.com/accesslint/mcp-server)。

## 功能

### 智能体

#### `accesslint:reviewer` - 无障碍代码审查器

综合性无障碍审计工具，可执行多步骤代码审查。

**功能说明：**
- 扫描代码库中的 WCAG 2.1 A 级和 AA 级合规性问题
- 遍历代码库以理解完整上下文
- 生成带优先级排序的结构化审计报告
- 提供包含文件位置、严重程度和 WCAG 参考的详细报告
- 包含具体建议和代码示例

**使用方式：**
使用 Task 工具直接调用智能体：
```typescript
// 示例：审查某组件的无障碍问题
Task({
  subagent_type: "accesslint:reviewer",
  prompt: "Review src/components/Button.tsx for accessibility issues"
})
```

**可用工具：** Read、Glob、Grep，以及用于颜色对比度分析的 MCP 工具

---

### 技能

#### `accesslint:contrast-checker` - 颜色对比度分析

交互式颜色对比度检查工具，可计算 WCAG 对比度并推荐无障碍替代色。

**功能说明：**
- 计算前景色与背景色之间的对比度
- 检查是否符合 WCAG AA 和 AAA 标准
- 推荐在保留设计风格的前提下符合无障碍要求的替代颜色
- 针对正文、大号文字和 UI 组件提供详细分析

**使用方式：**
直接调用技能：
```typescript
// 示例：检查某颜色组合是否符合 WCAG 标准
Skill({ command: "accesslint:contrast-checker" })
```

该技能提供交互式提示，您可以：
- 输入前景色和背景色（支持 hex、rgb、rgba 格式）
- 指定内容类型（正文、大号文字、UI 组件）
- 选择 WCAG 级别（AA 或 AAA）
- 获取修复违规问题的配色建议

---

#### `accesslint:refactor` - 无障碍重构专家

自动修复多个文件中的无障碍问题。

**功能说明：**
- 识别并修复多个文件中常见的无障碍问题
- 补充缺失的 alt 文本、ARIA 标签和语义化 HTML
- 处理复杂的跨文件重构
- 实现正确的 ARIA 模式和语义化 HTML
- 保持原有功能和代码风格
- 记录所有变更并附带说明

**使用方式：**
直接调用技能：
```typescript
// 示例：修复某目录下的无障碍问题
Skill({ skill: "accesslint:refactor" })
```

**可用工具：** Read、Write、Edit、Glob、Grep、Skill（可调用 contrast-checker 进行颜色分析）

---

#### `accesslint:use-of-color` - WCAG 颜色使用检查器

分析代码是否符合 WCAG 1.4.1 颜色使用规范，识别仅依赖颜色传达信息的情况。

**功能说明：**
- 检测仅通过颜色区分、无下划线或图标的链接
- 识别仅用颜色显示的表单验证错误
- 发现仅通过颜色标注的必填字段
- 检查仅用颜色表示的状态指示器（成功/错误状态）
- 分析交互元素悬停/聚焦状态仅依赖颜色的情况
- 审查数据可视化中仅用颜色区分数据的情况

**使用方式：**
直接调用技能：
```typescript
// 示例：检查组件是否仅用颜色作为唯一指示
Skill({ skill: "accesslint:use-of-color" })
```

**可用工具：** Read、Glob、Grep

---

### MCP 工具

安装 AccessLint 插件后，所有智能体和技能均可使用以下 MCP 工具：

#### `mcp__plugin_accesslint_accesslint__calculate_contrast_ratio`

计算两种颜色之间的 WCAG 对比度。

**参数：**
- `foreground`（字符串）：前景色（#RGB、#RRGGBB、rgb()、rgba()）
- `background`（字符串）：背景色（格式相同）

**返回值：** 对比度数值

---

#### `mcp__plugin_accesslint_accesslint__analyze_color_pair`

分析一对颜色的 WCAG 合规性，提供详细的通过/失败信息。

**参数：**
- `foreground`（字符串）：前景色
- `background`（字符串）：背景色
- `contentType`（可选）："normal-text" | "large-text" | "ui-component"
- `level`（可选）："AA" | "AAA"

**返回值：** 各内容类型的详细通过/失败分析

---

#### `mcp__plugin_accesslint_accesslint__suggest_accessible_color`

获取符合 WCAG 要求的无障碍替代颜色建议。

**参数：**
- `foreground`（字符串）：当前前景色
- `background`（字符串）：当前背景色
- `targetRatio`（数字）：目标对比度（如正文 AA 级为 4.5）
- `preserve`（可选）："foreground" | "background" | "both"

**返回值：** 包含对比度的配色建议

---

## WCAG 2.1 覆盖范围

本插件检查 A 级和 AA 级合规性，包括：

- **可感知性：** alt 文本、语义结构、颜色对比度
- **可操作性：** 键盘导航、焦点管理、焦点可见性
- **可理解性：** 清晰标签、错误识别、一致性行为
- **健壮性：** 正确使用 ARIA、无障碍名称和角色

### 常见检测问题

- 缺失 alt 属性和 ARIA 标签
- 无效的 ARIA 属性或角色
- 缺失或关联错误的表单标签
- 标题层级不规范
- 非语义化 HTML 使用
- 键盘导航问题
- 颜色对比度不足

## 相关资源

- [WCAG 2.1 指南](https://www.w3.org/WAI/WCAG21/quickref/)
- [WAI-ARIA 创作实践](https://www.w3.org/WAI/ARIA/apg/)
- [Claude Code 文档](https://docs.claude.com/en/docs/claude-code/)
- [MCP 服务器仓库](https://github.com/accesslint/mcp-server)
- [NPM 包](https://www.npmjs.com/package/@accesslint/mcp)

## 许可证

MIT