AI导哈

网页无障碍测试服务

A11y MCP是一个MCP服务器，为LLMs提供网页无障碍测试API访问，用于分析网页内容的WCAG合规性和识别无障碍问题。

  • by ronantakizawa
  • JavaScript
  • 本地部署
  • 94 星标
  • 更新于
在 GitHub 查看 ronantakizawa/a11ymcp

使用说明

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

https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b

A11y MCP是一种 MCP（模型上下文协议） 允许LLM访问web可访问性测试API的服务器。

此服务器使用 Deque Axe核心 API和 操纵者 允许LLM分析网络内容以符合WCAG标准，并识别可访问性问题。

注： 这不是Deque Labs的官方MCP服务器。

特性

  • 测试网页：使用可自定义的视口尺寸测试任何公共URL的可访问性问题
  • 测试HTML代码片段：测试原始HTML字符串的可访问性问题
  • WCAG合规性测试：根据各种WCAG标准（2.0、2.1、2.2）检查内容
  • 可定制的测试：指定要测试的可访问性标签/标准
  • 规则探索：获取有关可用无障碍规则的信息
  • 颜色对比分析：检查颜色组合是否符合WCAG标准
  • ARIA验证：测试ARIA属性的正确使用
  • 方向锁定检测：识别强制特定屏幕方向的内容

安装

先决条件

  • Node.js 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": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"]
}

示例--移动视口：

{
  "html": "<div><img src='image.jpg'></div>",
  "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": "<div role='button' aria-pressed='false'>Click me</div>"
}

check_orientation_lock

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

参数：

参数 必填 说明
html 是 要测试方向锁定问题的HTML内容

例子：

{
  "html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}

响应格式

服务器以结构化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": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
          "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）

依赖项

许可证

麻省理工学院

相关 MCP