剧作家可访问性MCP服务器
\[！提示\] 最简单的入门方法是使用单线安装： 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"
]
}
}
}Install in VS Code
您还可以使用VS Code CLI安装Playwright Accessibility MCP服务器：
# For VS Code
code --add-mcp '{"name":"playwright-accessibility","command":"npx","args":["playwright-accessibility-mcp-server@latest"]}'安装后，Playwright Accessibility MCP服务器将可用于VS Code中的GitHub Copilot代理。
Install in Cursor
首选 Cursor Settings -> MCP -> Add new MCP Server.按你的喜好命名，使用 command 使用命令键入 npx playwright-accessibility-mcp-server。您还可以通过单击来验证配置或添加类似命令的参数 Edit.
{
"mcpServers": {
"playwright-accessibility": {
"command": "npx",
"args": [
"playwright-accessibility-mcp-server@latest"
]
}
}
}Install in Windsurf
关注Windsuff MCP 文档.使用以下配置：
{
"mcpServers": {
"playwright-accessibility": {
"command": "npx",
"args": [
"playwright-accessibility-mcp-server@latest"
]
}
}
}Install in Claude Desktop
遵循MCP安装 指南，使用以下配置：
{
"mcpServers": {
"playwright-accessibility": {
"command": "npx",
"args": [
"playwright-accessibility-mcp-server@latest"
]
}
}
}𝗪𝗵𝘆 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗠𝗮𝘁𝘁𝗲𝗿𝘀:
无障碍测试确保数字内容可供残疾人使用。它促进了包容性和对WCAG等标准的遵守。通过将可访问性测试集成到您的工作流程中，您可以为每个人创造更好的用户体验。 🌍
𝗪𝗵𝘆 𝗣𝗹𝗮𝘆𝘄𝗿𝗶𝗴𝗵𝘁 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗠𝗮𝘁𝘁𝗲𝗿𝘀:
无障碍测试确保数字内容可供残疾人使用。它促进了包容性和对WCAG等标准的遵守。通过将Playwright可访问性测试集成到您的工作流程中，您可以：
- 📌𝗘𝗻𝗵𝗮𝗻𝗰𝗲 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲:让您的应用程序对所有人都可用，包括残疾人。
- 📌𝗘𝗻𝘀𝘂𝗿𝗲 𝗖𝗼𝗺𝗽𝗹𝗶𝗮𝗻𝗰𝗲:满足无障碍的法律和监管要求。
- 📌𝗣𝗿𝗼𝗺𝗼𝘁𝗲 𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆:营造一个包容性的数字环境，让每个人都可以访问您的内容并从中受益。
安装
- 克隆存储库：
git clone https://github.com/deepakkamboj/playwright-accessibility-mcp-server.git
cd playwright-accessibility-mcp-server- 安装依赖项：
npm install- 构建项目：
npm run build🔧 用法
启动服务器
- 启动服务器：
npm start- 通过MCP协议使用工具进行可访问性测试。
用作MCP服务器
此项目实现了MCP协议，允许您使用兼容MCP的客户端与服务器交互。以下是将其用作MCP服务器的步骤：
- 启动MCP服务器:
通过执行以下操作确保服务器正在运行：
npm start- 连接到服务器:
使用MCP客户端连接到服务器。默认服务器运行在 http://localhost:3000.
- 发送MCP请求:
通过MCP请求使用以下工具：
- scan-url：分析单个URL的可访问性违规。 - scan-html：分析原始HTML内容的可访问性违规。 - scan-batch：分析多个URL的可访问性违规。 - summarize-violations：总结Axe结果中的可访问性违规。 - write-violations-report：将可访问性违规报告写入输出目录。
- 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": "
Example
"
}
]
}
]
}
}使用MCP客户端将此请求发送到服务器，服务器将把违规报告写入输出目录。
MCP（JSON‑RPC）模式
对于AI客户端（例如Claude Desktop、Cursor、VS Code MCP扩展），请配置您的 _config.json:
{
"mcpServers": {
"playwright-accessibility-mcp-server": {
"command": "node",
"args": ["${AbsolutePath}/build/index.js"]
}
}
}MCP服务器运行后，您可以调用以下工具：
scan-url（参数：{ "url": "https://google.com" })scan-html（参数： `{ "html": "
Hello " }`)
scan-batch（参数：{ "urls": ["https://a.com","https://b.com"] })summarize-violations（参数：{ "result": })
MCP本地开发模式
对于本地开发，请配置您的 _config.json 如下：
{
"mcpServers": {
"playwright-accessibility-mcp-server": {
"command": "node",
"args": ["${AbsolutePath}/build/index.js"]
}
}
}发展
- 要在开发模式下运行服务器，请执行以下操作：
npm run dev- 要测试这些工具，请导出服务器并使用MCP SDK。
🤝 贡献
- 分叉回购。
- 创建分支(
git checkout -b feature/xyz). - 提交你的更改。
- 打开拉取请求（PR）。
许可证
该项目根据MIT许可证获得许可。