MCP Accessibility Scanner 🔍

一个使用 Playwright 和 Axe-core 提供自动化网页可访问性扫描的 Model Context Protocol (MCP) 服务器。该服务器使 LLMs 能够执行 WCAG 合规检查、捕获带注释的屏幕截图并生成详细的可访问性报告。

特性

✅ 完整的 WCAG 2.1/2.2 合规性检查
🖼️ 自动捕获屏幕截图并高亮显示违规
📄 带有修复指南的详细 JSON 报告

安装

您可以使用以下任何一种方法安装软件包：

使用 npm:

npm install -g mcp-accessibility-scanner

Docker 安装

项目包含一个 Dockerfile，它设置了所有必要的依赖项，包括 Node.js v22 和 Python 3.13。

1. 构建 Docker 镜像：

docker build -t mcp-server . 

1. 运行容器：

docker run -it -e MCP_PROXY_DEBUG=true mcp-server

您也可以在后台运行它：

docker run -d -p 3000:3000 mcp-server

在 VS Code 中安装

使用 VS Code CLI 在 VS Code 中安装 Accessibility Scanner：

对于 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 中的示例用法：

Could you scan example.com for accessibility issues related to color contrast?

具有自定义选项的高级示例：

Could you scan example.com for accessibility issues with a viewport of 1280x720 and show the browser window?

开发

克隆并设置项目：

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 进行开发：

1. 构建开发镜像：

docker build -t mcp-server-dev .

1. 通过卷挂载实时代码更改来运行：

docker run -it -v $(pwd):/app -p 3000:3000 -e MCP_PROXY_DEBUG=true mcp-server-dev

项目结构

├── src/              # Source code
│   ├── index.ts     # MCP server setup and tool definitions
│   └── scanner.ts   # Core scanning functionality
├── build/           # Compiled JavaScript output
├── Dockerfile       # Docker configuration for containerized setup
├── package.json     # Project configuration and dependencies
└── tsconfig.json    # TypeScript configuration

许可证

MIT