🚀 网页可访问性测试 MCP 服务器（A11y MCP）
A11y MCP 服务器是一款用于网页可访问性测试的工具，支持多种实用功能，能帮助开发者全面检测网页的可访问性问题。
🚀 快速开始
若要使用 A11y MCP 服务器，可按以下步骤进行配置：
1. 安装 Node.js 和 npm
确保已安装 Node.js 和 npm。你可以通过访问 Node.js 官网 下载并安装最新版本。
2. 安装依赖项
在项目目录中运行以下命令以安装所需的依赖项：
npm install @modelcontextprotocol/sdk puppeteer @axe-core/puppeteer axe-core
3. 配置 MCP 服务器
使用 MCP 服务器 SDK 初始化你的项目，并配置相关的测试参数。
✨ 主要特性
- 网页可访问性测试：借助 axe - core 和 Puppeteer 提供全面的网页可访问性检查。
- 多平台支持：适用于 Windows、macOS 和 Linux 系统。
- 详细的测试报告：返回结构化的 JSON 格式结果，包含 violations（违规项）、passes（通过项）等信息。
💻 使用示例
基础用法
test_accessibility
- 描述：用于检查网页内容的可访问性问题。
- 参数：
url：需要测试的网页地址。config： axe - core 的配置选项，如忽略特定规则等。
test_html_string
- 描述：直接传入 HTML 字符串进行可访问性测试。
- 参数：
htmlString：包含 HTML 内容的字符串。config： axe - core 配置选项。
📚 详细文档
响应格式
服务器返回以下结构化的 JSON 格式结果：
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "确保前景色和背景色的对比度符合 WCAG 2 AA 最低对比度比率要求",
"help": "元素必须满足最低颜色对比度比率要求",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "低对比度文本",
"target": ["div"],
"failureSummary": "修复以下任意一个：元素的对比度不足，前景色为 #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