Accessibility Scanner

TypeScript

MIT License

justasmonkev

最近更新：1个月前

将Axe Core与Playwright集成，以执行自动化的Web可访问性测试，实现持续集成、合规性审核以及识别可访问性障碍。

概述

MCP Accessibility Scanner

一个使用 Playwright 和 Axe-core 进行网页自动化无障碍扫描的 Model Context Protocol (MCP) 服务器。

特性

✅ 完全符合 WCAG 2.1/2.2 标准
🖼️ 自动截取带有违规高亮的屏幕截图
📄 详细 JSON 报告，包含修复指南

安装

bash 复制代码

# 克隆仓库
git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
cd mcp-accessibility-scanner

# 安装依赖
npm install

# 构建项目（编译 TypeScript 并安装 Playwright 浏览器）
npm run prepare

Claude Desktop 配置

在 Claude Desktop 设置中添加以下内容以启用 Accessibility Scanner 服务器：

json 复制代码

{
  "mcpServers": {
    "accessibility-checker": {
      "command": "node",
      "args": [
        "path/build/server.js"
      ]
    }
  }
}

使用

扫描器提供了一个名为 scan_accessibility 的工具，接受以下参数：

url: 要扫描的网页 URL
violationsTag: 要检查的无障碍违规标签数组

在 Claude 中的示例用法：

复制代码

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

开发

启动 TypeScript 编译器的监视模式：

bash 复制代码

npm run watch

本地测试 MCP 服务器：

bash 复制代码

npm run inspector

项目结构

src/: 源代码
- index.ts: MCP 服务器设置和工具定义
- accessibilityChecker.ts: 核心扫描功能
dist/: 编译后的 JavaScript 输出
package.json: 项目依赖和脚本
tsconfig.json: TypeScript 配置

输出

扫描器提供：

带有编号违规高亮的可视化报告
所有发现违规的详细 JSON 报告
保存到下载文件夹的全页面截图