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 サーバーを自動的にインストールするには:

手動インストール

1. リポジトリをクローンします。

2. 依存関係をインストールします:

3. サーバーを構築します。

構成

サーバーを MCP 設定ファイル (通常は~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.jsonにあります) に追加します。

環境変数

• MCP_OUTPUT_DIR : スクリーンショット出力が保存されるディレクトリ

  • simulate_colorblindツールに必要

  • 指定されていない場合は、現在の作業ディレクトリを基準とした「./output」がデフォルトになります。

  • MCP設定で構成されている場合には絶対パスである必要があります

使用法

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

ツール: check_accessibility

axe-core を使用して、指定された URL のアクセシビリティをチェックします。

パラメータ

• url (必須): 分析するURL

• waitForSelector (オプション): 分析前に待機する CSS セレクタ

• userAgent (オプション): リクエストのカスタム ユーザー エージェント文字列

使用例

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

カラーマトリックス変換を使用して、さまざまなタイプの色覚異常を持つユーザーに 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 (オプション): リクエストのカスタム ユーザー エージェント文字列

使用例

応答フォーマット

check_accessibility レスポンス

色盲シミュレーションレスポンス

エラー処理

サーバーには、一般的なシナリオに対応する包括的なエラー処理機能が含まれて���ます。

• ネットワークエラー

• 無効なURL

• タイムアウトの問題

• DNS解決の問題

エラー応答には、問題の診断に役立つ詳細なメッセージが含まれます。

発達

プロジェクト構造

建物

これにより、次のようになります。

1. TypeScriptをJavaScriptにコンパイルする

2. 出力ファイルを実行可能にする

3. コンパイルしたファイルをbuildディレクトリに配置する

デバッグ

サーバーには、コンソール出力で確認できる詳細なデバッグログ機能が搭載されています。これには以下が含まれます。

• ネットワーク要求と応答

• ページの読み込みステータス

• セレクタの待機状態

• 分析されたページからのコンソールメッセージ

• カラーシミュレーションの進捗状況

よくある問題と解決策

1. タイムアウトエラー

   • コード内のタイムアウト値を増やす

   • ネットワーク接続を確認する

   • URLにアクセスできることを確認する

2. DNS解決エラー

   • URLが正しいことを確認してください

   • ネットワーク接続を確認する

   • wwwサブドメインを使ってみてください

3. セレクタが見つかりません

   • ページにセレクターが存在することを確認する

   • 動的コンテンツが読み込まれるまで待ちます

   • 正しいセレクターについてはページソースを確認してください

4. カラーシミュレーションの問題

   • ページの色はサポートされている形式（RGB、RGBA、または HEX）で指定されていることを確認してください。

   • ページで動的な色の変更が使用されているかどうかを確認します（追加の待ち時間が必要になる場合があります）

   • スクリーンショット出力ディレクトリが存在し、書き込み可能であることを確認します

貢献

1. リポジトリをフォークする

2. 機能ブランチを作成する

3. 変更をコミットする

4. ブランチにプッシュする

5. プルリクエストを作成する

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。