Skip to main content
Glama
deenesjakoruzh
bilhasry-deriv

Web Accessibility MCP Server

by bilhasry-deriv
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

Web 可访问性 MCP 服务器

铁匠徽章

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

特征

  • 使用 axe-core 分析任何 URL 的 Web 可访问性

  • 使用颜色矩阵模拟色盲（红色盲、绿色盲、蓝色盲）

  • 详细报告无障碍违规行为

  • 支持自定义用户代理和选择器

  • 用于故障排除的调试日志记录

  • 根据 WCAG 指南进行全面的可访问性检查

Related MCP server: Cursor A11y MCP

先决条件

  • 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文件。

Available Tools

2 tools
check_accessibilityC

Check web accessibility of a given URL using axe-core

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to analyze
waitForSelectorNoOptional CSS selector to wait for before analysis
userAgentNoOptional user agent string to use for the request

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states what the tool does but doesn't describe how it behaves: it doesn't mention whether this is a read-only analysis, what the output format might be, potential rate limits, authentication requirements, or error conditions. For a tool that performs web analysis, this leaves significant behavioral gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that communicates the core purpose without any wasted words. It's appropriately sized for a tool with a clear, focused function and is front-loaded with the essential information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given that there are no annotations and no output schema, the description should provide more complete context for this accessibility checking tool. It doesn't explain what kind of results to expect, what accessibility standards are checked, whether the analysis is comprehensive or limited, or how the tool handles dynamic content. For a tool with 3 parameters and no structured output documentation, this is insufficient.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, so all parameters are documented in the schema itself. The description doesn't add any parameter-specific information beyond what's already in the schema descriptions. According to the scoring rules, when schema_description_coverage is high (>80%), the baseline is 3 even with no param info in the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('Check') and resource ('web accessibility of a given URL'), and mentions the technology used ('axe-core'). However, it doesn't explicitly differentiate from its sibling tool 'simulate_colorblind', which appears to be a related but distinct accessibility function.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus its sibling 'simulate_colorblind' or other alternatives. It doesn't mention prerequisites, typical use cases, or exclusions, leaving the agent with no contextual usage information beyond the basic purpose.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

simulate_colorblindC

Simulate how a webpage looks for colorblind users

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to capture
typeYesType of color blindness to simulate
outputPathNoOptional path to save the screenshot
userAgentNoOptional user agent string to use for the request

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool simulates colorblind views but doesn't describe how (e.g., generates a screenshot, modifies display, or returns data), what the output is (e.g., image file, visual report), or any behavioral traits like performance, rate limits, or side effects. This leaves significant gaps for an agent to understand the tool's operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, clear sentence: 'Simulate how a webpage looks for colorblind users.' It is front-loaded with the core purpose, has zero wasted words, and is appropriately sized for the tool's complexity. Every part of the sentence earns its place by conveying essential information efficiently.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (4 parameters, no output schema, no annotations), the description is incomplete. It lacks details on output (e.g., what is returned or saved), behavioral context (e.g., how simulation works, any limitations), and usage guidelines. While the schema covers parameters well, the description doesn't compensate for missing annotations or output schema, leaving the agent with insufficient context for effective use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, clearly documenting all four parameters (url, type, outputPath, userAgent) with details like enum values for 'type.' The description doesn't add any parameter-specific information beyond what the schema provides, such as explaining the simulation process or output format. Given the high schema coverage, a baseline score of 3 is appropriate as the schema handles the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Simulate how a webpage looks for colorblind users.' It specifies the action (simulate) and resource (webpage appearance for colorblind users), making it easy to understand. However, it doesn't explicitly differentiate from its sibling tool 'check_accessibility,' which might also involve accessibility testing, though the focus here is specifically on colorblind simulation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention the sibling tool 'check_accessibility' or any other tools, nor does it specify prerequisites, contexts, or exclusions. Usage is implied from the purpose but lacks explicit direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updates
    • First observedcheck_accessibility
    • First observedsimulate_colorblind
Deploy Server
Give agents eyes on the webHosted screenshot MCP. Send a URL, get a pixel-perfect image. $0.002 per grab. Works with Claude, Cursor, and Codex.grabbit.liveAd

TDQS

B3.1/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: one checks general web accessibility using axe-core, while the other specifically simulates colorblindness effects on a webpage. There is no overlap or ambiguity between them.

Naming Consistency5/5

Both tools follow a consistent verb_noun pattern (check_accessibility, simulate_colorblind) with clear, descriptive names. The naming style is uniform and predictable throughout the set.

Tool Count2/5

With only two tools, the server feels thin for a web accessibility domain. While the tools are useful, typical accessibility testing involves more operations like checking screen reader compatibility, keyboard navigation, or ARIA attributes, suggesting notable gaps in coverage.

Completeness2/5

The tool set is severely incomplete for web accessibility. It lacks core operations such as validating HTML structure, testing screen reader output, assessing keyboard accessibility, or generating accessibility reports, which are essential for comprehensive accessibility evaluation.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

Appeared in Searches