A11y MCP Server

Web可访问性测试MCP服务器（A11y MCP）

](https://mseep.ai/app/ronantakizawa-a11ymcp)


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": "https://example.com",
  "tags": ["wcag2aa"]
}

示例--移动视口（iPhone 12/13）：

{
  "url": "https://example.com",
  "tags": ["wcag2aa"],
  "width": 390,
  "height": 844
}

test_html_string

测试HTML字符串的可访问性问题。

参数：

示例--默认视口：

{
  "html": "

",
  "tags": ["wcag2aa"]
}

示例--移动视口：

{
  "html": "

",
  "tags": ["wcag2aa"],
  "width": 375,
  "height": 812
}

get_rules

使用可选筛选获取有关可用可访问性规则的信息。返回一个规则对象数组，每个对象包含 ruleId, description, help, helpUrl，以及 tags.

参数：

示例——WCAG 2.1 AA的过滤规则：

{
  "tags": ["wcag21aa"]
}

示例--获取所有规则（无筛选器）：

{}

check_color_contrast

检查前景和背景颜色组合是否符合WCAG对比度要求。

参数：

例子：

{
  "foreground": "#777777",
  "background": "#EEEEEE",
  "fontSize": 16,
  "isBold": false
}

check_aria_attributes

检查ARIA属性在HTML中是否正确使用。

参数：

例子：

{
  "html": "
Click me
"
}

check_orientation_lock

检查内容是否强制特定方向。

参数：

例子：

{
  "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 参数：

依赖项

• @模型上下文协议/sdk
• 操纵者
• @斧头核心/木偶师
• 斧头核心

许可证

麻省理工学院