🚀 MCP 可访问性扫描仪 🔍
MCP 可访问性扫描仪是一个模型上下文协议（MCP）服务器，借助 Playwright 和 Axe-core 实现网页可访问性的自动化扫描。它让大型语言模型（LLMs）能够开展 WCAG 合规检查、捕获带注释的屏幕截图并生成详细报告，极大提升了网页可访问性检测的效率。
✨ 主要特性
- ✅ 全面支持 WCAG 2.1/2.2 标准检查，确保网页符合最新可访问性规范。
- 🖼️ 自动捕获屏幕截图并突出显示违规问题，让问题一目了然。
- 📄 生成详细 JSON 报告，附带修复建议，助力快速解决可访问性问题。
📦 安装指南
您可以根据自身需求，选择以下任意一种方法进行安装：
使用 npm 安装
npm install -g mcp-accessibility-scanner
Docker 安装
项目包含一个 Dockerfile，用于设置所有必要的依赖项，包括 Node.js v22 和 Python 3.13。
- 构建 Docker 镜像：
docker build -t mcp-server .
- 运行容器：
docker run -it -e MCP_PROXY_DEBUG=true mcp-server
您也可以在后台运行：
docker run -d -p 3000:3000 mcp-server
在 VS Code 中安装
在 VS Code 中使用 VS Code CLI 安装可访问性扫描仪：
- 对于 VS Code：
code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
- 对于 VS Code Insiders：
code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
📚 详细文档
配置示例
以下是 Claude Desktop 的配置示例：
{
"mcpServers": {
"accessibility-scanner": {
"command": "npx",
"args": ["-y", "mcp-accessibility-scanner"]
}
}
}
使用方法
扫描器暴露了一个名为 scan_accessibility 的单一工具，该工具接受以下参数：
url: 要扫描的网页 URL（必填）violationsTag: 要检查的可访问性违规标签数组（必填）viewport: 可选对象，用于自定义视口大小width: 数值（默认：1920）height: 数值（默认：1080）
shouldRunInHeadless: 可选布尔值，用于控制无头模式（默认：true）
⚠️ 重要提示
执行扫描时，任何可访问性违规问题的标注屏幕截图都会自动保存到您的下载文件夹中。
示例用法
- 基础用法 在 Claude 中，您可以这样使用：
您能否扫描 example.com 以检查与颜色对比相关的可访问性问题？
- 高级用法 带有自定义选项的高级示例：
您能否使用 1280x720 视口大小并显示浏览器窗口来扫描 example.com 的可访问性问题？
🔧 技术细节
开发步骤
- 克隆项目并进行设置：
git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner
npm install
- 以观察者模式启动 TypeScript 编译器：
npm run watch
- 在本地测试 MCP 服务器：
npm run inspector
使用 Docker 进行开发
- 构建开发镜像：
docker build -t mcp-server-dev .
- 通过挂载卷进行运行以实现实时代码更改：
docker run -it -v $(pwd):/app mcp-server-dev bash
项目结构
项目文件夹包含以下内容：
Dockerfile: 用于构建 Docker 镜像的配置文件。package.json: 包含项目依赖项和脚本的任务清单文件。index.js: 主应用程序入口点。utils/: 包含各种实用工具函数的目录。
🤝 贡献
欢迎任何贡献！请参考项目的 CONTRIBUTING.md 文件以获取详细信息。
📄 许可证
该项目受 MIT License 保护。