](https://mseep.ai/app/bilhasry-deriv-mcp-web-a11y)
Web可访问性MCP服务器
](https://smithery.ai/server/@bilhasry-deriv/mcp-web-a11y)
一种MCP（模型上下文协议）服务器，使用axe-core和Puppeteer提供web可访问性分析功能。
特性
- 使用axe core分析任何URL的网络可访问性
- 使用颜色矩阵模拟色盲（前斜视、后斜视、三斜视）
- 无障碍违规的详细报告
- 支持自定义用户代理和选择器
- 调试日志用于故障排除
- 基于WCAG指南的全面无障碍检查
先决条件
- Node.js（v14或更高版本）
- npm
安装
通过Smithery安装
通过以下方式自动安装克劳德桌面的Web辅助功能MCP服务器 史密瑟里:
npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude手动安装
- 克隆存储库：
git clone [repository-url]
cd mcp-web-a11y- 安装依赖项：
npm install- 构建服务器：
npm run build配置
将服务器添加到MCP设置文件（通常位于 ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json):
{
"mcpServers": {
"web-a11y": {
"command": "node",
"args": ["/path/to/mcp-web-a11y/build/index.js"],
"disabled": false,
"autoApprove": [],
"env": {
"MCP_OUTPUT_DIR": "/path/to/output/directory"
}
}
}
}环境变量
MCP_OUTPUT_DIR：保存屏幕截图输出的目录
- 必需的 simulate_colorblind 工具 - 如果未指定，则默认为“”。/相对于当前工作目录的输出 - 在MCP设置中配置时必须是绝对路径
用法
服务器提供两个工具： check_accessibility 用于分析网络可访问性和 simulate_colorblind 用于模拟色盲。
工具：检查_可访问性
使用axe-core检查给定URL的可访问性。
参数
url（必填）：要分析的URLwaitForSelector（可选）：分析前等待的CSS选择器userAgent（可选）：请求的自定义用户代理字符串
示例用法
mcp-web-a11y
check_accessibility
{
"url": "https://example.com",
"waitForSelector": ".main-content",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
工具：模拟_色盲
使用颜色矩阵变换模拟网页对不同类型色盲的用户的显示方式。
色盲类型
该工具支持三种类型的色盲模拟：
- 红色盲 （红盲）-使用矩阵：
0.567, 0.433, 0
0.558, 0.442, 0
0, 0.242, 0.758- 绿色盲 （绿盲）-使用矩阵：
0.625, 0.375, 0
0.7, 0.3, 0
0, 0.3, 0.7- 蓝色盲 （蓝盲）-使用矩阵：
0.95, 0.05, 0
0, 0.433, 0.567
0, 0.475, 0.525参数
url（必填）：要捕获的URLtype（必填）：要模拟的色盲类型（“色盲”、“deuteranopia”或“三色盲”）outputPath（可选）：屏幕截图输出的自定义路径userAgent（可选）：请求的自定义用户代理字符串
示例用法
mcp-web-a11y
simulate_colorblind
{
"url": "https://example.com",
"type": "deuteranopia",
"outputPath": "colorblind_simulation.png"
}
响应格式
check_可访问性响应
{
"url": "analyzed-url",
"timestamp": "ISO-timestamp",
"violations": [
{
"impact": "serious|critical|moderate|minor",
"description": "Description of the violation",
"help": "Help text explaining the issue",
"helpUrl": "URL to detailed documentation",
"nodes": [
{
"html": "HTML of the affected element",
"failureSummary": "Summary of what needs to be fixed"
}
]
}
],
"passes": 42,
"inapplicable": 45,
"incomplete": 3
}模拟色盲反应
{
"url": "analyzed-url",
"type": "colorblind-type",
"outputPath": "path/to/screenshot.png",
"timestamp": "ISO-timestamp",
"message": "Screenshot saved with [type] simulation"
}错误处理
服务器包括针对常见场景的全面错误处理：
- 网络错误
- URL无效
- 超时问题
- DNS解析问题
错误响应将包括详细的消息，以帮助诊断问题。
发展
项目结构
mcp-web-a11y/
├── src/
│ └── index.ts # Main server implementation
├── build/ # Compiled JavaScript
├── output/ # Generated screenshots
├── package.json # Project dependencies and scripts
└── tsconfig.json # TypeScript configuration建筑
npm run build这将：
- 将TypeScript编译为JavaScript
- 使输出文件可执行
- 将编译后的文件放入
build目录
调试
服务器包括可以在控制台输出中观察到的详细调试日志记录。这包括：
- 网络请求和响应
- 页面加载状态
- 选择器等待状态
- 来自分析页面的任何控制台消息
- 色彩模拟进度
常见问题及解决方法
- 超时错误
- 增加代码中的超时值 - 检查网络连接 - 验证URL是否可访问
- DNS解析错误
- 验证URL是否正确 - 检查网络连接 - 尝试使用www子域
- 未找到选择器
- 验证页面上是否存在选择器 - 等待动态内容加载 - 检查页面源中的选择器是否正确
- 颜色模拟问题
- 确保页面的颜色以支持的格式（RGB、RGBA或HEX）指定 - 检查页面是否使用动态颜色更改（可能需要额外的等待时间） - 验证屏幕截图输出目录是否存在且可写
贡献
- 分叉存储库
- 创建要素分支
- 提交您的更改
- 推到分支
- 创建拉取请求
许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。