
Web Accessibility MCP Server

2025.03.11
1
JavaScript网页可访问性分析色盲模拟WCAG 合规性检查浏览器自动化开发效率
Web Accessibility MCP Server 是一个基于 Model Context Protocol (MCP) 的服务,专注于网页可访问性分析。它利用 axe-core 和 Puppeteer 提供强大的网页可访问性检查功能,包括检测违反 WCAG 指南的问题,以及模拟不同类型的色盲视觉。该服务适用于开发者和设计师,帮助他们创建更具包容性的网页体验。
View on GitHub
Overview
基本能力
产品定位
Web Accessibility MCP Server 是一个专注于网页可访问性分析的 MCP 服务,旨在帮助开发者和设计师识别和解决网页中的可访问性问题。
核心功能
- 使用 axe-core 分析任何 URL 的网页可访问性
- 模拟色盲视觉(红色盲、绿色盲、蓝色盲)
- 提供详细的可访问性违规报告
- 支持自定义用户代理和选择器
- 基于 WCAG 指南的全面可访问性检查
- 调试日志记录
适用场景
- 网页开发过程中的可访问性测试
- 网站质量保证和审计
- 设计师验证色彩方案对不同色盲用户的可见性
- 教育目的,了解网页可访问性标准
工具列表
- check_accessibility
- 能力:分析给定 URL 的可访问性
-
参数:URL(必填)、等待选择器(可选)、用户代理(可选)
-
simulate_colorblind
- 能力:模拟色盲视觉并生成截图
- 参数:URL(必填)、色盲类型(必填)、输出路径(可选)、用户代理(可选)
常见问题解答
- 超时错误
- 增加代码中的超时值
- 检查网络连接
-
验证 URL 是否可访问
-
DNS 解析错误
- 验证 URL 是否正确
- 检查网络连接
-
尝试使用 www 子域名
-
选择器未找到
- 验证选择器是否存在于页面上
- 等待动态内容加载
-
检查页面源代码中的正确选择器
-
颜色模拟问题
- 确保页面颜色以支持的格式指定(RGB、RGBA 或 HEX)
- 检查页面是否使用动态颜色变化(可能需要额外等待时间)
- 验证截图输出目录是否存在且可写
使用教程
使用依赖
- Node.js (v14 或更高版本)
- npm
安装教程
通过 Smithery 安装
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
工具是必需的 - 如果未指定,默认为当前工作目录下的 './output'
- 在 MCP 设置中配置时必须使用绝对路径
调试方式
服务器包含详细的调试日志记录,可以在控制台输出中观察: - 网络请求和响应 - 页面加载状态 - 选择器等待状态 - 分析页面的任何控制台消息 - 颜色模拟进度
运行服务器后,观察控制台输出以获取调试信息。