MCP可访问性检查器
一个模型上下文协议(MCP)服务器,用于使用Playwright和axe-core对网站进行自动WCAG可访问性审计。专为AI编码代理和助手设计,用于发现、诊断和指导可访问性问题的修复。
AI代理用例
- 可访问性审计:对任何URL运行完整的WCAG 2.1 AA审核
- 有针对性的检查:检查特定类别(对比度、ARIA、表格、图像等)
- 元件级检查:通过CSS选择器深入单个组件
- 报告生成:创建带有执行摘要的降价报告并修复指导
- 配对 mcp颜色转换:使用对比审计结果和颜色工具进行完整的可访问性修复
安装和配置
MCP客户端配置
添加到您的MCP客户端配置(Claude Desktop、Gemini CLI等):
{
"mcpServers": {
"accessibility-checker": {
"command": "npx",
"args": ["-y", "mcp-accessibility-checker@latest"]
}
}
}本地开发
git clone https://github.com/bennyzen/mcp-accessibility-checker.git
cd mcp-accessibility-checker
npm install
npx playwright install chromium
npm run dev可用工具(10)
全面审计
| 工具 | 说明 |
|---|---|
audit | 对URL运行所有WCAG规则。返回违规、通过和未完成的检查。 |
分类工具
| 工具 | 说明 |
|---|---|
audit_aria | ARIA角色、属性、状态和名称/角色/值合规性 |
audit_contrast | 颜色对比度和视觉提示(WCAG AA/AAA) |
audit_forms | 表单标签、字段集、错误识别 |
audit_images | 图像替代文本、角色和文本替代方案 |
audit_structure | 标题层次结构、地标、文档结构、语义 |
audit_navigation | 键盘可访问性、标签顺序、跳过链接、焦点管理 |
audit_tables | 表标题、范围、标题、数据表结构 |
元素级别
| 工具 | 说明 |
|---|---|
check_element | 运行特定CSS选择器范围内的检查 |
报告
| 工具 | 说明 |
|---|---|
report | 根据审计结果生成降价报告 |
示例用法
全面审计
{
"name": "audit",
"arguments": { "url": "https://example.com" }
}返回包含所有违规的结构化JSON,包括元素选择器、HTML代码段、严重性和修复指南。
类别审核
{
"name": "audit_contrast",
"arguments": { "url": "https://example.com" }
}元素检查
{
"name": "check_element",
"arguments": {
"url": "https://example.com",
"selector": "#login-form"
}
}生成报告
{
"name": "report",
"arguments": {
"audit_json": ""
}
}生成降价报告:
# Accessibility Audit Report
**URL:** https://example.com
**Date:** 2026-03-19T14:18:54.037Z
**Standard:** WCAG 2.1 Level AA
## Summary
| Severity | Count |
|----------|-------|
| Critical | 0 |
| Serious | 0 |
| Moderate | 2 |
| Category | Violations |
|------------|-----------|
| Structure | 1 |
| Navigation | 1 |
## Moderate Issues
### landmark-one-main (1 element)
Ensure the document has a main landmark
[Rule documentation](...)
- `html`
**Fix:** Document does not have a main landmark
## Passed Checks (13)
aria-hidden-body, bypass, color-contrast, ...审核结果形状
所有审计工具都返回相同的JSON结构:
{
url: string,
timestamp: string,
toolVersion: string,
axeVersion: string,
summary: {
violations: number,
passes: number,
incomplete: number,
bySeverity: { critical, serious, moderate, minor }
},
violations: [{
id: string, // axe rule ID
severity: string, // "critical" | "serious" | "moderate" | "minor"
description: string,
helpUrl: string, // Deque rule documentation
category: string, // "aria" | "contrast" | "forms" | etc.
nodes: [{
selector: string, // CSS selector path
html: string, // HTML snippet
failureSummary: string
}]
}],
passes: [{ id, description, nodes: number }],
incomplete: [{ id, description, nodes: [{ selector, html }] }]
}工作流程:完全无障碍修复
- 跑
audit了解全貌 - 使用分类工具(
audit_contrast,audit_forms等)钻入特定区域 - 使用
check_element检查单个组件 - 使用
report为利益相关者生成降价摘要 - 使用 mcp颜色转换
compare和contrast寻找兼容颜色替代品的工具
故障排除
未找到铬
npx playwright install chromium慢速页面超时
默认导航超时为30秒。对于速度较慢的页面,可以考虑在页面可能被缓存后进行审核。
未发现违规行为
干净的审计并不意味着该网站是完全可访问的。斧头核心会自动捕获约57%的WCAG问题。仍然需要手动测试(键盘导航、屏幕阅读器)。
许可证
麻省理工学院
