Skip to main content
Glama
Sign In
enesjakozh

Web Accessibility MCP Server

by bilhasry-deriv
GitHub
JavaScript
MIT License
  • Apple
  • Linux
RedditDiscord
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

local-only server

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

Integrations

  • Uses Puppeteer to navigate websites, take screenshots, and analyze web content for accessibility testing purposes

WebアクセシビリティMCPサーバー

axe-core と Puppeteer を使用して Web アクセシビリティ分析機能を提供する MCP (Model Context Protocol) サーバー。

特徴

  • axe-coreを使用して任意のURLのWebアクセシビリティを分析する
  • カラーマトリックスを使用して色覚異常（P型、D型、T型）をシミュレートする
  • アクセシビリティ違反の詳細な報告
  • カスタムユーザーエージェントとセレクタのサポート
  • トラブルシューティングのためのデバッグログ
  • WCAGガイドラインに基づく包括的なアクセシビリティチェック

前提条件

  • 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ファイルを参照してください。

You must be authenticated.

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

Tools

axe-core と Puppeteer を使用して Web アクセシビリティ分析と色覚異常シミュレーションを提供し、WCAG ガイドラインに基づいた詳細なアクセシビリティ チェックと視覚シミュレーションを可能にします。

  1. Features
    1. Prerequisites
      1. Installation
        1. Installing via Smithery
        2. Manual Installation
      2. Configuration
        1. Environment Variables
      3. Usage
        1. Tool: check_accessibility
        2. Tool: simulate_colorblind
        3. Response Format
        4. Error Handling
      4. Development
        1. Project Structure
        2. Building
        3. Debugging
      5. Common Issues and Solutions
        1. Contributing
          1. License

            Related Resources

            Appeared in Searches

            ID: mya2mkxy9a