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 (Model Context Protocol) サーバー。

特徴

  • axe-coreを使用して任意のURLのWebアクセシビリティを分析する

  • カラーマトリックスを使用して色覚異常（P型、D型、T型）をシミュレートする

  • アクセシビリティ違反の詳細な報告

  • カスタムユーザーエージェントとセレクタのサポート

  • トラブルシューティングのためのデバッグログ

  • WCAGガイドラインに基づく包括的なアクセシビリティチェック

Related MCP server: Cursor A11y MCP

前提条件

  • Node.js (v14以上)

  • npm

インストール

Smithery経由でインストール

Smithery経由で Claude Desktop 用の Web アクセシビリティ 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設定で構成されている場合には絶対パスである必要があります

使用法

サーバーは、Web アクセシビリティを分析するためのcheck_accessibilityと色覚異常をシミュレートするためのsimulate_colorblindの 2 つのツールを提供します。

ツール: 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>

ツール: シミュレートカラーブラインド

カラーマトリックス変換を使用して、さまざまなタイプの色覚異常を持つユーザーに Web ページがどのように表示されるかをシミュレートします。

色覚異常の種類

このツールは、次の 3 種類の色覚異常シミュレーションをサポートしています。

  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 (必須): シミュレートする色覚異常の種類 (「第1色覚」、「第2色覚」、「第3色覚」)

  • 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