カーソル A11y MCP

AIエージェントにアクセシビリティテスト機能を提供するModel Context Protocol（MCP）サーバー。このツールは、axe-coreとPuppeteerを用いてWebアプリケーションのアクセシビリティ問題を特定するのに役立ちます。

特徴

• 任意の URL またはローカル開発サーバーでアクセシビリティ テストを実行します
• 包括的なアクセシビリティテストのためのaxe-coreを搭載
• 以下を含む詳細な違反レポートを提供します:
  • 影響レベル
  • 問題の説明
  • ヘルプテキストとドキュメントのリンク
  • 影響を受けるHTML要素
  • 失敗の概要

プロジェクト構造

• src/ - MCP サーバーとアクセシビリティ テスト ツールのソース コード
• test-site/ - テスト用に意図的にアクセシビリティの問題を抱えたReactアプリケーション
• build/ - ソースコードのコンパイル済みバージョン

インストール

次に、テスト サイトの依存関係をインストールします。

使用法

MCPサーバーの起動

テストサイトの実行

テストサイトはhttp://localhost:5000で利用できます。

アクセシビリティテストの実行

このツールは次の 2 種類の入力を受け入れます。

1. テスト用の完全なURL
2. http://localhost:5000に追加される相対パス

依存関係

• @modelcontextprotocol/sdk : ^1.4.1
• puppeteer :^24.1.1
• zod :^3.24.1

テストサイトの依存関係

• react :^18.2.0
• react-dom :^18.2.0
• react-scripts : 5.0.1

発達

1. src/ディレクトリ内のソースコードを変更する
2. npm run buildを実行して変更をコンパイルします。
3. npm startでサーバーを起動します。

カーソルでの設定

このアクセシビリティ テスト ツールを Cursor の MCP サーバー設定に追加するには:

1. カーソルの設定を開く (⌘ + ,)
2. 「機能」>「MCPサーバー」に移動します
3. 次の構成で新しい MCP サーバーを追加します。
   • 名前: a11y
   • ドロップダウンからcommandを選択
   • コマンド: node path/to/cursor-a11y-mcp/index/file/in/build/folder ( path/to/cursor-a11y-mcp/index/file/in/build/folderを、ビルド フォルダー内の index.js ファイルへの絶対パスに置き換えます。)
4. Addクリック
5. アクセシビリティテストツールがCursorのComposerで利用できるようになります

Composerでの使用

Cursor の Composer でアクセシビリティ テスト ツールを使用するには:

1. ターミナルで実行します:

これによりhttp://localhost:5000でテストサイトが起動します。

2. カーソルのコンポーザーで、 use a11y toolと入力します。
3. Composerはツールを実行するように促します
4. ツールを実行すると、レスポンス内のアクセシビリティ違反と、違反を修正するためのコードアクションが表示されます。
5. Composerは、違反が修正されたことを確認するためにツールを再度使用するように要求する場合があります。

ライセンス

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

バージョン

現在のバージョン: 2.0.1