简介

一个MCP服务器， enables语言模型通过Deque Axe-core API和Puppeteer依据WCAG标准进行网页可访问性测试。

（优化后）：
一个MCP服务器，使大型语言模型能够通过Deque Axe-core API和Puppeteer按照WCAG标准执行网页无障碍测试。

简介

一个MCP服务器， enables语言模型通过Deque Axe-core API和Puppeteer依据WCAG标准进行网页可访问性测试。

（优化后）：
一个MCP服务器，使大型语言模型能够通过Deque Axe-core API和Puppeteer按照WCAG标准执行网页无障碍测试。

Web 可访问性测试 MCP 服务器 (A11y MCP)

A11y MCP 是一个 MCP（模型上下文协议）服务器，它使 LLMs 能够访问网页可访问性测试 API。

该服务器使用 Deque Axe-core API 和 Puppeteer 来允许 LLMs 分析网页内容是否符合 WCAG 标准，并识别可访问性问题。

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

如果您喜欢这个项目，请给它点个星！🌟

功能

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

安装

要在 Claude Desktop 中使用此服务器，您需要在 MCP 设置中进行配置：

对于 macOS： 编辑位于 ~/Library/Application Support/Claude/claude_desktop_config.json 的文件

{ "mcpServers": { "a11y-accessibility": { "command": "npx", "args": [ "-y", "a11y-mcp-server" ] } } }

对于 Windows： 编辑位于 %APPDATA%Claudesettingsclaude_mcp_settings.json 的文件

对于 Linux： 编辑位于 ~/.config/Claude/settings/claude_mcp_settings.json 的文件 将 /path/to/axe-mcp-server/build/index.js 替换为您的编译后的服务器文件的实际路径。

可用工具

test_accessibility

测试 URL 的可访问性问题。

参数：

• url（必需）：要测试的网页的 URL
• tags（可选）：要测试的 WCAG 标签数组（例如，["wcag2aa"]）

示例

{ "url": "https://example.com", "tags": ["wcag2aa"] }

test_html_string

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

• html（必需）：要测试的 HTML 内容
• tags（可选）：要测试的 WCAG 标签数组（例如，["wcag2aa"]）

示例

{ "html": "

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

get_rules

获取有关可用可访问性规则的信息，可选择过滤。

check_color_contrast

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

参数：

• foreground（必需）：十六进制格式的前景色（例如，"#000000"）
• background（必需）：十六进制格式的背景色（例如，"#FFFFFF"）
• fontSize（可选）：字体大小（以像素为单位，默认值：16）
• isBold（可选）：文本是否加粗（默认值：false）

示例

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

check_aria_usage

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

参数：

• html（必需）：要测试 ARIA 属性使用的 HTML 内容

示例

{ "html": "

" }

check_orientation_lock

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

参数：

• html（必需）：要测试方向锁定问题的 HTML 内容

示例

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

响应格式

服务器以结构化的 JSON 格式返回可访问性测试结果：

{ "violations": [ { "id": "color-contrast", "impact": "serious", "description": "确保前景色和背景色之间的对比度达到 WCAG 2 AA 最小对比度阈值", "help": "元素必须满足最小颜色对比度阈值", "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast", "affectedNodes": [ { "html": "<div style="color: #aaa; background-color: #eee;">低对比度文本", "target": ["div"], "failureSummary": "修复以下任一问题：元素的颜色对比度不足，为 1.98（前景色：#aaa，背景色：#eee，字体大小：12.0pt，字体粗细：正常）" } ] } ], "passes": 1, "incomplete": 0, "inapplicable": 2, "timestamp": "2025-04-25T16:45:33.655Z", "url": "about:blank", "testEngine": { "name": "axe-core", "version": "4.10.3" }, "testRunner": { "name": "axe" }, "testEnvironment": { "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36", "windowWidth": 800, "windowHeight": 600, "orientationAngle": 0, "orientationType": "portrait-primary" } }## 依赖项

• @modelcontextprotocol/sdk
• puppeteer
• @axe-core/puppeteer
• axe-core

工具列表

• test_accessibility: Test a webpage for accessibility issues using Axe-core

• test_html_string: Test an HTML string for accessibility issues

• get_rules: Get information about available accessibility rules with optional filtering

• check_color_contrast: Check if a foreground and background color combination meets WCAG contrast requirements

• check_aria_attributes: Check if ARIA attributes are used correctly in HTML

• check_orientation_lock: Check if content forces a specific orientation

服务配置

[{'mcpServers': {'a11y-accessibility': {'args': ['-y', 'a11y-mcp-server'], 'command': 'npx'}}}]

来源

• 来源：github
• 链接：https://github.com/ronantakizawa/a11ymcp