カーソル A11y MCP
AIエージェントにアクセシビリティテスト機能を提供するModel Context Protocol（MCP）サーバー。このツールは、axe-coreとPuppeteerを用いてWebアプリケーションのアクセシビリティ問題を特定するのに役立ちます。
特徴
任意の URL またはローカル開発サーバーでアクセシビリティ テストを実行します
包括的なアクセシビリティテストのためのaxe-coreを搭載
以下を含む詳細な違反レポートを提供します:
影響レベル
問題の説明
ヘルプテキストとドキュメントのリンク
影響を受けるHTML要素
失敗の概要
Related MCP server: Web Accessibility MCP Server
プロジェクト構造
src/- MCP サーバーとアクセシビリティ テスト ツールのソース コードtest-site/- テスト用に意図的にアクセシビリティの問題を抱えたReactアプリケーションbuild/- ソースコードのコンパイル済みバージョン
インストール
次に、テスト サイトの依存関係をインストールします。
使用法
MCPサーバーの起動
テストサイトの実行
テストサイトはhttp://localhost:5000で利用できます。
アクセシビリティテストの実行
このツールは次の 2 種類の入力を受け入れます。
テスト用の完全なURL
http://localhost:5000に追加される相対パス
依存関係
@modelcontextprotocol/sdk: ^1.4.1puppeteer:^24.1.1zod:^3.24.1
テストサイトの依存関係
react:^18.2.0react-dom:^18.2.0react-scripts: 5.0.1
発達
src/ディレクトリ内のソースコードを変更するnpm run buildを実行して変更をコンパイルします。npm startでサーバーを起動します。
カーソルでの設定
このアクセシビリティ テスト ツールを Cursor の MCP サーバー設定に追加するには:
カーソルの設定を開く (⌘ + ,)
「機能」>「MCPサーバー」に移動します
次の構成で新しい 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 ファイルへの絶対パスに置き換えます。)
AddクリックアクセシビリティテストツールがCursorのComposerで利用できるようになります
Composerでの使用
Cursor の Composer でアクセシビリティ テスト ツールを使用するには:
ターミナルで実行します:
これによりhttp://localhost:5000でテストサイトが起動します。
カーソルのコンポーザーで、
use a11y toolと入力します。Composerはツールを実行するように促します
ツールを実行すると、レスポンス内のアクセシビリティ違反と、違反を修正するためのコードアクションが表示されます。
Composerは、違反が修正されたことを確認するためにツールを再度使用するように要求する場合があります。
ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。
バージョン
現在のバージョン: 2.0.1