无障碍测试服务器

剧作家可访问性MCP服务器

该项目是一个用于可访问性测试的模型上下文协议（MCP）服务器的实现，使用 剧作家 和 斧。它提供了扫描URL、原始HTML和批量URL以查找可访问性违规并总结结果的工具。

[！提示] 最简单的入门方法是使用单线安装： npx playwright-accessibility-mcp-server。这将自动下载并运行最新版本，而无需手动安装软件包。

特性

• 扫描url：扫描单个URL是否存在可访问性违规。
• 扫描html：扫描原始HTML内容是否违反可访问性。
• 扫描批次：扫描多个URL是否存在可访问性违规。
• 总结违规行为：总结Axe结果中的可访问性违规。
• 撰写违规报告：将可访问性违规报告写入输出目录。

需求

• Node.js 18或更新版本
• VS Code、Cursor、Windsurf、Claude Desktop或任何其他MCP客户端

入门

首先，在客户端安装Playwright Accessibility MCP服务器。典型的配置如下：

{
  "mcpServers": {
    "playwright-accessibility": {
      "command": "npx",
      "args": [
        "playwright-accessibility-mcp-server@latest"
      ]
    }
  }
}

# For VS Code
code --add-mcp '{"name":"playwright-accessibility","command":"npx","args":["playwright-accessibility-mcp-server@latest"]}'

{
  "mcpServers": {
    "playwright-accessibility": {
      "command": "npx",
      "args": [
        "playwright-accessibility-mcp-server@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "playwright-accessibility": {
      "command": "npx",
      "args": [
        "playwright-accessibility-mcp-server@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "playwright-accessibility": {
      "command": "npx",
      "args": [
        "playwright-accessibility-mcp-server@latest"
      ]
    }
  }
}

𝗪𝗵𝘆 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗠𝗮𝘁𝘁𝗲𝗿𝘀:

无障碍测试确保数字内容可供残疾人使用。它促进了包容性和对WCAG等标准的遵守。通过将可访问性测试集成到您的工作流程中，您可以为每个人创造更好的用户体验。 🌍

𝗪𝗵𝘆 𝗣𝗹𝗮𝘆𝘄𝗿𝗶𝗴𝗵𝘁 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗠𝗮𝘁𝘁𝗲𝗿𝘀:

无障碍测试确保数字内容可供残疾人使用。它促进了包容性和对WCAG等标准的遵守。通过将Playwright可访问性测试集成到您的工作流程中，您可以：

• 📌𝗘𝗻𝗵𝗮𝗻𝗰𝗲 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲:让您的应用程序对所有人都可用，包括残疾人。
• 📌𝗘𝗻𝘀𝘂𝗿𝗲 𝗖𝗼𝗺𝗽𝗹𝗶𝗮𝗻𝗰𝗲:满足无障碍的法律和监管要求。
• 📌𝗣𝗿𝗼𝗺𝗼𝘁𝗲 𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆:营造一个包容性的数字环境，让每个人都可以访问您的内容并从中受益。

安装

1. 克隆存储库：

   复制

   git clone https://github.com/deepakkamboj/playwright-accessibility-mcp-server.git
   cd playwright-accessibility-mcp-server
   

2. 安装依赖项：

   复制

   npm install
   

3. 构建项目：

   复制

   npm run build
   

🔧 用法

启动服务器

1. 启动服务器：

   复制

   npm start
   

2. 通过MCP协议使用工具进行可访问性测试。

用作MCP服务器

此项目实现了MCP协议，允许您使用兼容MCP的客户端与服务器交互。以下是将其用作MCP服务器的步骤：

1. 启动MCP服务器: 通过执行以下操作确保服务器正在运行：

   复制

   npm start
   

2. 连接到服务器: 使用MCP客户端连接到服务器。默认服务器运行在 http://localhost:3000.

3. 发送MCP请求: 通过MCP请求使用以下工具：

   • scan-url：分析单个URL的可访问性违规。
   • scan-html：分析原始HTML内容的可访问性违规。
   • scan-batch：分析多个URL的可访问性违规。
   • summarize-violations：总结Axe结果中的可访问性违规。
   • write-violations-report：将可访问性违规报告写入输出目录。

4. MCP请求示例: 以下是MCP请求编写违规报告的示例：

   复制

   {
     "tool": "write-violations-report",
     "input": {
       "violations": [
         {
           "id": "color-contrast",
           "impact": "serious",
           "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.",
           "helpUrl": "https://dequeuniversity.com/rules/axe/4.7/color-contrast",
           "nodes": [
             {
               "target": ["#example"],
               "failureSummary": "Fix this element's color contrast.",
               "html": "<div id='example' style='color: #fff; background-color: #fff;'>Example</div>"
             }
           ]
         }
       ]
     }
   }
   

   使用MCP客户端将此请求发送到服务器，服务器将把违规报告写入输出目录。

MCP（JSON‑RPC）模式

对于AI客户端（例如Claude Desktop、Cursor、VS Code MCP扩展），请配置您的 <client>_config.json:

{
  "mcpServers": {
    "playwright-accessibility-mcp-server": {
      "command": "node",
      "args": ["${AbsolutePath}/build/index.js"]
    }
  }
}

MCP服务器运行后，您可以调用以下工具：

• scan-url （参数： { "url": "https://google.com" })
• scan-html （参数： { "html": "<h1>Hello</h1>" })
• scan-batch （参数： { "urls": ["https://a.com","https://b.com"] })
• summarize-violations （参数： { "result": <axe result> })

MCP本地开发模式

对于本地开发，请配置您的 <client>_config.json 如下：

{
  "mcpServers": {
    "playwright-accessibility-mcp-server": {
      "command": "node",
      "args": ["${AbsolutePath}/build/index.js"]
    }
  }
}

发展

• 要在开发模式下运行服务器，请执行以下操作：

  复制

  npm run dev
  

• 要测试这些工具，请导出服务器并使用MCP SDK。

🤝 贡献

1. 分叉回购。
2. 创建分支(git checkout -b feature/xyz).
3. 提交你的更改。
4. 打开拉取请求（PR）。

许可证

该项目根据MIT许可证获得许可。