Skip to main content
Glama
deenesjakoruzh

Web Accessibility MCP Server

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

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

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

How are these scores calculated?

local-only server

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

Tools

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

  1. 特徴
    1. 前提条件
      1. インストール
        1. Smithery経由でインストール
        2. 手動インストール
      2. 構成
        1. 環境変数
      3. 使用法
        1. ツール: check_accessibility
        2. ツール: シミュレートカラーブラインド
        3. 応答フォーマット
        4. エラー処理
      4. 発達
        1. プロジェクト構造
        2. 建物
        3. デバッグ
      5. よくある問題と解決策
        1. 貢献
          1. ライセンス

            Related Resources

            Related MCP Servers

            • Steel MCP Server

              steel-dev
              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

            • MCP Accessibility Scanner

              JustasMonkev
              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

            • Cursor A11y MCP

              westsideori
              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

            • a11y-mcp

              priyankark
              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

            Appeared in Searches

            New 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