Web可访问性测试MCP服务器（A11y MCP）
https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b
A11y MCP是一种 MCP（模型上下文协议） 允许LLM访问web可访问性测试API的服务器。
注： 这不是Deque Labs的官方MCP服务器。
特性
- 测试网页：使用可自定义的视口尺寸测试任何公共URL的可访问性问题
- 测试HTML代码片段：测试原始HTML字符串的可访问性问题
- WCAG合规性测试：根据各种WCAG标准（2.0、2.1、2.2）检查内容
- 可定制的测试：指定要测试的可访问性标签/标准
- 规则探索：获取有关可用无障碍规则的信息
- 颜色对比分析：检查颜色组合是否符合WCAG标准
- ARIA验证：测试ARIA属性的正确使用
- 方向锁定检测：识别强制特定屏幕方向的内容
安装
先决条件
- 18岁或以后
- MCP兼容客户端（克劳德桌面、克劳德代码、VS代码、光标等）
克劳德桌面版
编辑MCP配置文件：
- macOS：
~/Library/Application Support/Claude/claude_desktop_config.json - 窗户：
%APPDATA%\Claude\claude_desktop_config.json - Linux：
~/.config/Claude/claude_desktop_config.json
将服务器添加到 mcpServers 对象：
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": ["-y", "a11y-mcp-server"]
}
}
}克劳德代码（CLI）
claude mcp add a11y-accessibility -- npx -y a11y-mcp-server这将为当前项目注册服务器。要使其在所有项目中可用，请执行以下操作：
claude mcp add --scope user a11y-accessibility -- npx -y a11y-mcp-server验证服务器是否已注册：
claude mcp list注： 重新启动Claude Code会话后，MCP工具可用。
VS代码（副本）
添加到您的VS代码 settings.json 或 .vscode/settings.json:
{
"mcp": {
"servers": {
"a11y-accessibility": {
"command": "npx",
"args": ["-y", "a11y-mcp-server"]
}
}
}
}光标
添加到光标MCP配置(.cursor/mcp.json):
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": ["-y", "a11y-mcp-server"]
}
}
}帆板运动
添加到您的Windsurf MCP配置(~/.codeium/windsurf/mcp_config.json):
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": ["-y", "a11y-mcp-server"]
}
}
}可用工具
测试可访问性
测试URL的可访问性问题。
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
url | 是 | 要测试的网页的URL |
tags | 否 | 要测试的WCAG标签数组（例如。， ["wcag2aa"]) |
width | 否 | 视口宽度（像素）（默认值：1280） |
height | 否 | 视口高度（像素）（默认值：800） |
示例--桌面视口（默认）：
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}示例--移动视口（iPhone 12/13）：
{
"url": "https://example.com",
"tags": ["wcag2aa"],
"width": 390,
"height": 844
}test_html_string
测试HTML字符串的可访问性问题。
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
html | 是 | 要测试的HTML内容 |
tags | 否 | 要测试的WCAG标签数组（例如。， ["wcag2aa"]) |
width | 否 | 视口宽度（像素）（默认值：1280） |
height | 否 | 视口高度（像素）（默认值：800） |
示例--默认视口：
{
"html": "
",
"tags": ["wcag2aa"]
}示例--移动视口：
{
"html": "
",
"tags": ["wcag2aa"],
"width": 375,
"height": 812
}get_rules
使用可选筛选获取有关可用可访问性规则的信息。返回一个规则对象数组，每个对象包含 ruleId, description, help, helpUrl，以及 tags.
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
tags | 否 | 按标签过滤规则（例如。， ["wcag2a", "wcag2aa", "best-practice"]) |
示例——WCAG 2.1 AA的过滤规则：
{
"tags": ["wcag21aa"]
}示例--获取所有规则（无筛选器）：
{}check_color_contrast
检查前景和背景颜色组合是否符合WCAG对比度要求。
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
foreground | 是 | 前景颜色（例如。， "#000000", "rgb(0,0,0)") |
background | 是 | 背景颜色（例如。， "#FFFFFF", "rgb(255,255,255)") |
fontSize | 否 | 字体大小（像素）（默认值：16） |
isBold | 否 | 文本是否加粗（默认值：false） |
例子：
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}check_aria_attributes
检查ARIA属性在HTML中是否正确使用。
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
html | 是 | 要测试ARIA属性使用情况的HTML内容 |
例子：
{
"html": "
Click me
"
}check_orientation_lock
检查内容是否强制特定方向。
参数：
| 参数 | 必填 | 说明 |
|---|---|---|
html | 是 | 要测试方向锁定问题的HTML内容 |
例子：
{
"html": "Content"
}响应格式
服务器以结构化JSON格式返回可访问性测试结果：
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "
Low contrast text
",
"target": ["div"],
"failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
}
]
}
],
"passes": 1,
"incomplete": 0,
"inapplicable": 2,
"timestamp": "2025-04-25T16:45:33.655Z",
"url": "about:blank",
"testEngine": {
"name": "axe-core",
"version": "4.10.3"
}
}WCAG标签参考
您可以使用的常见标签 tags 参数：
| 标签 | 描述 |
|---|---|
wcag2a | WCAG 2.0 A级 |
wcag2aa | WCAG 2.0 AA级 |
wcag2aaa | WCAG 2.0 AAA级 |
wcag21a | WCAG 2.1 A级 |
wcag21aa | WCAG 2.1 AA级 |
wcag22aa | WCAG 2.2 AA级 |
best-practice | 最佳实践（并非严格意义上的WCAG） |
依赖项
许可证
麻省理工学院
