227 lines
6.1 KiB
Markdown
227 lines
6.1 KiB
Markdown
# 无障碍访问检测插件
|
||
|
||
`无障碍` `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 |