クロードコードプラグイン

概要

Axe アクセシビリティプラグインは、クロードコードからインストールして実行される、Dequeのアクセシビリティツールキットです。インストールすると、次の3つのことが同時に行われます：

• サーバーを登録します。 The plugin ships a ready-made MCP server entry, so you don't hand-write a .mcp.json.
• クロードにツールの使い方を教えます。 背景スキルが自動でアクセシビリティ作業にロードされ、クロードが分析→修正→確認のループを追い、remediateを正確にバッチ処理し、ツール間のフィールドを推測することなくマッピングします。
• 3つのスラッシュコマンドを追加します 設定、リポジトリレベルのエージェント指示の生成、ページ上の完全な修正ループの実行のためのものです。

プラグインはgithub.com/dequelabs/axe-accessibilityでオープンソースとして公開され、MITライセンスを取得しています。

クロードコードだけのためではありません

クロードコードはプラグインが動作する場所ですが、2つのコマンドが他エージェントとエディタに出力を生成します：

• /axe-accessibility:mcp-generate-instructions writes the analyze → remediate → verify workflow into .github/copilot-instructions.md, Cursor rules, or AGENTS.md as readily as into CLAUDE.md. Anyone on the team using Copilot or Cursor inherits the workflow from the repository, whether or not they have the plugin — or Claude Code — installed.
• /axe-accessibility:mcp-setup は カーソル、Copilot付きのVS Code、またはクロードデスクトップのためにAxe MCP サーバーを設定できます。クロードコードだけではありません。

したがって、プラグインを導入するのは、エージェントを混合して使用するリポジトリのセットアップおよび指示作成ツールとして純粋に合理的です。

要件

プラグインをインストールするには：

• プラグインサポート付きのクロードコード。

スキャンを実行するには — つまり、analyze、igt、およびremediate ツールをクロードコードまたはプラグインが設定した他のクライアントから使用するには：

• Axe MCP サーバーアクセスを含むAxe DevTools for Webのサブスクリプション。なければ、ツールは認証に失敗します。
• 1つのランタイム、使用する配布に応じて：
  • npm (what the plugin ships): Node.js 22.19.0 またはそれ以降, plus a one-time Chromium install. See Chromiumをインストール — the server does ではありません download a browser for you, and skipping this step is the most common first-run failure.
  • Docker：Dockerがインストールされ実行されています。Chromiumはイメージ内に送られます。
• OAuth 2.0 認証のために：アクティブなNode.js LTSリリース、構成はnpx @deque/axe-authを呼び出します。

Only the first applies if you're installing the plugin solely to run /axe-accessibility:mcp-generate-instructions — writing agent-instruction files needs neither a runtime nor a subscription.

インストール

Dequeのマーケットプレイスを追加し、クロードコード内からプラグインをインストールします：

/plugin marketplace add dequelabs/axe-accessibility
/plugin install axe-accessibility

最初のコマンドはdequelabs/axe-accessibility リポジトリをプラグインマーケットプレイスとして登録します（リポジトリ自体がマーケットプレイスとしても機能します）。2番目のコマンドはそこからプラグインをインストールします。マーケットプレイスを追加するのは一度だけでよく、後のインストールや更新ではこのステップを省略できます。

MCP サーバーがロードされるように促されたとき、クロードコードを再起動します。

認証

プラグインのバンドルされたサーバー構成は認証に依存しないです。起動時にOAuthアクセストークンを発行しようとし、正確に1つ資格情報がサーバーに届くことを確認します — ログインしている場合はOAuthトークン、そうでない場合はAXE_API_KEYです。

お好みの方法を選択してください：

• APIキー — Axeアカウントポータルの下にAPIキー → 新しいAPIキーを追加を作成し、Axe MCPサーバー製品を選びます。それから、それをシェルにエクスポートしてClaude Codeが読み取れるようにします：

  export AXE_API_KEY="your-api-key-here"

  永続化するために、その行をシェルプロファイル（~/.bashrc, ~/.zshrcなど）に追加します。キーをレポジトリ内のファイルにコミットしないでください。

• OAuth 2.0 — @deque/axe-auth CLIで一度ログインします：

  npx -y @deque/axe-auth login

  これはブラウザを開いてPKCEフローを実行し、トークンをOSのキーチェーンに保存し、自動的に更新します。フルフロー、セッション管理、プラットフォームサポートについては認証をご覧ください。

バンドルされた構成はこのルールをサポートし、Docker構成よりも多くの作業が必要です。コンテナは明示的な-eフラグと共に渡された変数のみを受け取りますが、npm配布はシェル全体の環境を継承します — そのため、エクスポートされたAXE_API_KEYとアクティブなOAuthセッションの両方がサーバーに到達し、起動を停止させる場合があります。バンドルされたエントリは最初に継承されたAXE_ACCESS_TOKENをクリアし、新しいトークンを発行できる場合、それを設定する前にAXE_API_KEYを解除します。OAuthが両方利用可能な場合は優先されます。

プライベートクラウドとオンプレミスの展開

npm配布はシェルからAXE_SERVER_URLを継承するため、それを資格情報と共にエクスポートするだけで十分です：

export AXE_SERVER_URL="https://your-axe-instance.example.com"

OAuthを使用する場合、ログイン時にも同じURLを渡してください：npx -y @deque/axe-auth login --server https://your-axe-instance.example.com。AXE_SERVER_URLが設定されていない場合、サーバーはhttps://axe.deque.com（Dequeの共有US SaaSインスタンス）にデフォルトします。構成リファレンスをご覧ください。

インストールの確認

1. Claude Codeを再起動します。

2. /mcpを実行し、axe-mcp-serverがリストされて接続されていること、ならびにanalyze、igt、remediateツールが利用可能であることを確認します。

3. 既知のページに対してスモークスキャンを実行します：

   Analyze https://dequeuniversity.com/demo/mars for accessibility issues

実際のページの成功したスキャンは大きなペイロードを返します — 数十キロバイトは通常であり、エラーではありません。クライアントが結果が大きすぎると不満を言う場合は、analyzeのselectorパラメータでスキャンの範囲を絞ってください。

サーバーが接続しない場合は、Nodeバージョン、Chromiumのインストール、および正確に1つの資格情報が設定されていることを確認し、トラブルシューティングをご覧ください。

含まれているもの

mcp-usageスキル

これを直接呼び出すことはありません。アクセスビリティー、a11y、WCAG準拠、またはウェブUIのアクセシビリティ問題の修正が関与するタスクには自動的に読み込まれます。他の方法でCLAUDE.mdに手書きする必要がある操作知識をClaudeに提供します。

• ワークフロー。 ページを分析し、違反を修正し、作業が完了したと判断する前にゼロ違反を確認するために再分析します。
• フィールドマッピング。 各問題がanalyzeからremediateのパラメーターにどのようにマッピングされるか — エージェントが二つのツールを推測で接続するときに最も一般的なエラーの原因です。それにはトラップが含まれます：問題はレスポンスのdata配列の下にあり、問題自体のremediationフィールドはremediateパラメーターが要求する文字列ではなく生のチェックデータのオブジェクトです。
• バッチ処理。 remediateは1〜25のissues配列を各呼び出しで受け取り、各要素に発信者が発明したidを持ちます。スキャンごとに1回の呼び出し、問題ごとに1回の呼び出しではありません — 問題ごとの呼び出し形式は完全に拒否されます。
• クレジット認識。 クレジットは 1 件あたり で消費され、コールごとではありませんので、バッチ処理が契約であり、割引ではありません。analyze を再実行して確認することにクレジットは使われないため、確認は安価です。
• どの結果を信頼するか。 フラグが立てられた問題 isAdvanced: true は 高度なルール から得られます — AI とコンピュータービジョン — であり、確率的なため、実際の UI に対して確認する必要があります。標準の axe-core の結果 (isAdvanced: false) は決定論的で信頼性があります。
• キーボードテスト。 When to reach for igt, and how its issue shape differs from analyze's.
• ルール特有の細かいニュアンス。 判断を要するルール（image-alt、color-contrast、link-name/button-name、フォームラベリングなど）に関するガイダンス。

スキルが常に利用可能であるため、平易な言葉でのリクエストが儀式なしに機能します：

Make the checkout page at http://localhost:3000/checkout accessible

コマンド

/axe-accessibility:mcp-setup

/axe-accessibility:mcp-setup [client]

Axe MCP Server への接続を案内し、判断を仮定するのではなく質問します。クライアントをオプションで渡すことで — claude-code、cursor、vscode、claude-desktop — 質問を省略できます。

コマンド:

1. npm または Docker 配布 を選択するかを尋ね、そのランタイムを確認します — Node バージョンと npm のための Chromium、Docker のための稼働中のデーモン。
2. APIキー または OAuth 2.0 認証を求めるかを尋ね、アカウントポータルでキーを作成するか、ブラウザーログインを実行します。
3. クライアントの対応する設定を書き込みます — 既存の MCP 設定に統合するため上書きしません。Claude Code の npm ディストリビューションでは、プラグインのバンドルサーバーによって通常はこの手順が不要です。
4. 知っておくと良いオプションの設定を提供します：プライベートクラウドのための AXE_SERVER_URL、デフォルトの高度なルールの立場のための AXE_ADVANCED_RULES、既存のブラウザを再利用するための AXE_CHROME_PATH (npm のみ)。
5. 接続を確認し、スモークスキャンを実施します。

プラグインのインストールがすでにサーバーを登録していても便利です：認証を初めて設定する際や、Docker に切り替える際、プライベートクラウドを指す際、または同じマシン上で異なるエディタを設定する際に実行します。生成されたクライアントスニペットはCopilot付きのVS Code、カーソル、クロードコードで文書化されたものと同じです — このコマンドは正しいものを選択し、既存の設定に統合してくれます。

/axe-accessibility:mcp-generate-instructions

/axe-accessibility:mcp-generate-instructions [targets]

必須の「分析→修正→検証」ワークフローを書き込み、リポジトリのエージェント指示ファイルに組み込みます。そうすることで、いかなる コーディングエージェントがリポジトリ内で働くことができ、プラグインがインストールされているエージェントだけでなく、すべてがそれに従います。対象：

引数がない場合、コマンドはこれらのファイルのどれが既に存在するかを検出し、書き込む前にそれを確認します。

各ファイルには、単なるループだけでなく全契約 — remediate バッチ処理ルール、フィールドマッピング、決定論的と高度な信頼の区別、igt キーボードセクション、クレジットノートがあります。ツールの名前はターゲットごとに適応されます。クライアントは MCP ツール名を異なる名前空間にする — 例えば、Copilot は mcp_axe-mcp-server_analyze にバインドしますが、Claude Code や Cursor はプレーン名を解決します。

既存のファイルは統合され、破壊されない：もしアクセシビリティワークフローセクションが既に存在する場合は、その場所で更新されます。それ以外の場合、そのセクションが追加され、ファイルの残りは保護されます。このコマンドはまた、可能な限りリポジトリに指示をカスタマイズします — 例えば、プロジェクトの実際の開発サーバーの URL と開始コマンドをプレースホルダーの代わりに参照します。

/axe-accessibility:mcp-generate-instructions all

all を生成することは、共有リポジトリにおける通常の選択です：1 人が Claude Code から 1 回実行し、ファイルをコミットし、すべての貢献者のエージェントがそのワークフローを取得します — Copilot は.github/copilot-instructions.mdから、Cursor は.cursor/rules/accessibility.mdcから、などです。指示はそれを読むエージェントにだけ影響を及ぼし、各貢献者はそれでもなお、ワークフローが実際に動作するために各自のクライアント内で Axe MCP サーバーを接続する必要があります。

これは AI エージェントの設定 のテンプレートの自動対応物です。

/axe-accessibility:mcp-audit

/axe-accessibility:mcp-audit <url> [max-rounds]

ページ上での完全な修正ループを実行し、ソースコードに修正を適用します。スキームおよびポートを含む完全な URL を渡します。省略した場合、コマンドはあなたのpackage.jsonスクリプトと共通ポートから実行中の開発サーバーを検出し、スキャンする前に URL を確認します。

各ラウンド：

1. 分析 で URL を解析し、問題を収集します。
2. トリアージ をフラグで整理します — isAdvanced の結果は、何かを変更する前に実際の UI に対して確認され、isNeedsReview の結果は、自動修正されるのではなく設計決定の呼び出し時にあなたに提示されます。また、isBestPractice の結果は「クリーン」を妨げることはありません。
3. ラウンドの全ての問題を 単一のバッチコール (1 コールにつき最大 25 件、超過した場合は一連のバッチに分割されます) で 修正 します。
4. 適用 the guidance to your source code, correlating each result back by id and checking its status, since a batch can partially fail. Suggested code fixes are adapted to the real component rather than pasted verbatim.
5. 再分析 を再度確認します。

ループは、違反がゼロになった時点または max-rounds (デフォルト 5) までで停止します。また、ラウンドが進展を示さない場合は早期に停止します — その時点で残っている問題は通常、設計上の決定を必要とするか、高度なルールの誤検出であるため、このコマンドはそのように報告し、コードをねじってゼロにすることはありません。進捗はラウンド毎に報告され (例えば、round 1: 7 → round 2: 2 → round 3: 0)、コマンドはコミットする前にレビューできるようにしたコード変更をまとめます。

/axe-accessibility:mcp-audit http://localhost:3000/checkout 3

単なるURLではないページに到達するには、基盤のツールと同様に動作します: ログインやインタラクションを説明し、その手順がbefore アクションとして渡されます。環境ルーティングや事前認証済みセッションを説明すると、それらはナビゲーション前に適用されるcookiesとして渡されます。秘密情報はfillステップのvalueまたはクッキーのvalueに保持してください。セレクタやクッキー名には保持しないでください。

自動化された違反が解消されたら、コマンドはオプションのキーボード通過をigtと一緒に実行できます — フォーカスの順序、フォーカスのトラップ、フォーカスの可視性は静的スキャンでは見えません。メニュー、ダイアログ、カスタムウィジェットがあるページでこれが必要な場合は直接依頼してください。

/axe-accessibility:mcp-audit http://localhost:3000 and run the keyboard test

提案されたワークフロー

1. /axe-accessibility:mcp-setup — サーバーに接続して認証します。/mcpで確認してください。
2. /axe-accessibility:mcp-generate-instructions all — リポジトリにワークフローを組み込んで、すべてのエージェントやチームメイトがそれを継承します。
3. /axe-accessibility:mcp-audit http://localhost:3000 — すでにページにあるアクセシビリティの負債を整理します。
4. それ以降は、ただビルドしてください。mcp-usageスキルが、UIの変更に対するループを要求されずにClaudeが実行し続けます。

プラグインの管理

Claude Codeの/pluginコマンドは、プラグインのライフサイクルを管理します。

/plugin                 # browse and manage installed plugins
/plugin update axe-accessibility
/plugin uninstall axe-accessibility

アンインストールすると、バンドルされたMCPサーバーエントリとスキル、コマンドが削除されます。/axe-accessibility:mcp-generate-instructionsによって書かれたエージェント指示ファイルはリポジトリに残りますが、もはや不要な場合は自分で削除してください。

関連ページ

• ディストリビューションの選択 — npm対Docker、およびnpm用Chromiumのインストール
• クロードコードのセットアップ — プラグインなしでサーバーを手動で設定します
• 認証 — APIキーとOAuth 2.0の全般について
• 構成リファレンス — 環境変数とエージェント指示テンプレート
• 高度なルール — プリセット、優先順位、およびisAdvancedフラグの意味
• トラブルシューティング — 接続、Chromium、Docker、および認証エラー
• AIクレジット — remediateとigtがクレジットをどのように消費するか