Cursor A11y

🚀 Cursor A11y MCP

このモデルコンテキストプロトコル（MCP）サーバーは、axe-coreとPuppeteerを使用して、ウェブアプリケーションのアクセシビリティテストを行い、アクセシビリティに関する問題を特定することができます。

✨ 主な機能

• 任意のURLまたはローカル開発サーバー上でアクセシビリティテストを実行できます。
• axe-coreによってサポートされ、包括的なアクセシビリティテストを行います。
• 詳細な違反レポートを提供します。具体的には以下の情報が含まれます：
  • 影響レベル
  • 違反の説明
  • ヘルプテキストとドキュメントのリンク
  • 影響を受けるHTML要素
  • 失敗の概要

📁 プロジェクト構成

• src/ - MCPサーバーとアクセシビリティテストツールのソースコードが格納されています。
• test-site/ - 意図的にアクセシビリティ問題を持つReactアプリケーションで、テスト用に使用されます。
• build/ - ソースコードのコンパイル版が保存されています。

📦 インストール

まず、プロジェクトの依存関係をインストールします。

npm install

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

cd test-site
npm install
cd ..

💻 使用例

MCPサーバーの起動

npm run build
npm start

テストサイトの起動

npm run start:test-site

テストサイトは 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での設定方法

CursorのMCPサーバー設定にこのアクセシビリティテストツールを追加するには、以下の手順を実行します。

1. Cursorの設定（⌘ + ,）を開きます。
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. 追加 をクリックします。
5. アクセシビリティテストツールがCursorのComposerで使用可能になります。

Composerでの使用方法

CursorのComposerでアクセシビリティテストツールを使用するには、以下の手順を実行します。

1. ターミナルで以下のコマンドを実行します。

npm run start:test-site

これにより、テストサイトが http://localhost:5000 で起動します。 2. CursorのComposerで use a11y tool と入力します。 3. Composerがツールの実行を促します。 4. ツールを実行すると、応答にアクセシビリティ違反が表示され、違反を修正するためのコード操作項目が表示されます。 5. Composerがツールを再度実行して違反が修正されたことを確認するように促す場合があります。

📄 ライセンス

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

📌 バージョン

現在のバージョン：2.0.1