カーソル 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