Skip to main content
Glama

Web Accessibility MCP Server

Web 可访问性 MCP 服务器

使用 axe-core 和 Puppeteer 提供 Web 可访问性分析功能的 MCP(模型上下文协议)服务器。

特征

  • 使用 axe-core 分析任何 URL 的 Web 可访问性
  • 使用颜色矩阵模拟色盲(红色盲、绿色盲、蓝色盲)
  • 详细报告无障碍违规行为
  • 支持自定义用户代理和选择器
  • 用于故障排除的调试日志记录
  • 根据 WCAG 指南进行全面的可访问性检查

先决条件

  • Node.js(v14 或更高版本)
  • npm

安装

通过 Smithery 安装

要通过Smithery自动为 Claude Desktop 安装 Web Accessibility MCP 服务器:

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

手动安装

  1. 克隆存储库:
git clone [repository-url] cd mcp-web-a11y
  1. 安装依赖项:
npm install
  1. 构建服务器:
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 设置中配置时必须是绝对路径

用法

服务器提供了两个工具:用于分析网页可访问性的check_accessibility和用于模拟色盲的simulate_colorblind

工具:check_accessibility

使用 axe-core 检查给定 URL 的可访问性。

参数
  • url (必填):需要分析的 URL
  • waitForSelector (可选):分析前等待的 CSS 选择器
  • userAgent (可选):请求的自定义用户代理字符串
示例用法
<use_mcp_tool> <server_name>mcp-web-a11y</server_name> <tool_name>check_accessibility</tool_name> <arguments> { "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" } </arguments> </use_mcp_tool>

工具:simulate_colorblind

使用颜色矩阵变换模拟网页对不同类型色盲用户的显示方式。

色盲类型

该工具支持三种类型的色盲模拟:

  1. 红色(红盲) - 使用矩阵:
    0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758
  2. 绿色(绿盲) - 使用矩阵:
    0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7
  3. 蓝色(蓝盲) - 使用矩阵:
    0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525
参数
  • url (必填):要捕获的 URL
  • type (必填):要模拟的色盲类型(“红色盲”、“绿色盲”或“蓝色盲”)
  • outputPath (可选):屏幕截图输出的自定义路径
  • userAgent (可选):请求的自定义用户代理字符串
示例用法
<use_mcp_tool> <server_name>mcp-web-a11y</server_name> <tool_name>simulate_colorblind</tool_name> <arguments> { "url": "https://example.com", "type": "deuteranopia", "outputPath": "colorblind_simulation.png" } </arguments> </use_mcp_tool>

响应格式

check_accessibility 响应
{ "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

这将:

  1. 将 TypeScript 编译为 JavaScript
  2. 使输出文件可执行
  3. 将编译后的文件放在build目录中

调试

该服务器包含详细的调试日志,可以在控制台输出中查看。其中包括:

  • 网络请求和响应
  • 页面加载状态
  • 选择器等待状态
  • 来自分析页面的任何控制台消息
  • 颜色模拟进度

常见问题和解决方案

  1. 超时错误
    • 增加代码中的超时值
    • 检查网络连接
    • 验证 URL 是否可访问
  2. DNS解析错误
    • 验证 URL 是否正确
    • 检查网络连接
    • 尝试使用 www 子域名
  3. 未找到选择器
    • 验证选择器是否存在于页面上
    • 等待动态内容加载
    • 检查页面源代码中的选择器是否正确
  4. 色彩模拟问题
    • 确保页面的颜色以支持的格式(RGB、RGBA 或 HEX)指定
    • 检查页面是否使用动态颜色变化(可能需要额外的等待时间)
    • 验证屏幕截图输出目录是否存在且可写

贡献

  1. 分叉存储库
  2. 创建功能分支
  3. 提交你的更改
  4. 推送到分支
  5. 创建拉取请求

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息,请参阅LICENSE文件。

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

使用 axe-core 和 Puppeteer 提供网页可访问性分析和色盲模拟,从而实现基于 WCAG 指南的详细可访问性检查和视觉模拟。

  1. 特征
    1. 先决条件
      1. 安装
        1. 通过 Smithery 安装
        2. 手动安装
      2. 配置
        1. 环境变量
      3. 用法
        1. 工具:check_accessibility
        2. 工具:simulate_colorblind
        3. 响应格式
        4. 错误处理
      4. 发展
        1. 项目结构
        2. 建筑
        3. 调试
      5. 常见问题和解决方案
        1. 贡献
          1. 执照

            Related MCP Servers

            • A
              security
              A
              license
              A
              quality
              Enables LLMs like Claude to navigate the web through Puppeteer-based tools and Steel. Based on the Web Voyager framework, it provides tools for all the standard web actions click clicking/scrolling/typing/etc and taking screenshots.
              Last updated -
              9
              38
              JavaScript
              MIT License
              • Apple
            • A
              security
              A
              license
              A
              quality
              Enables automated web accessibility scans for WCAG compliance using Playwright and Axe-core, providing visual and JSON reports with remediation guidance.
              Last updated -
              1
              95
              14
              TypeScript
              MIT License
            • A
              security
              A
              license
              A
              quality
              Provides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.
              Last updated -
              1
              JavaScript
              MIT License
            • A
              security
              A
              license
              A
              quality
              An MCP (Model Context Protocol) server for performing accessibility audits on webpages using axe-core. Use the results in an agentic loop with your favorite AI assistants (Cline/Cursor/GH Copilot) and let them fix a11y issues for you!
              Last updated -
              2
              305
              17
              JavaScript
              Mozilla Public License 2.0

            View all related MCP servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/bilhasry-deriv/mcp-web-a11y'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server