Claude Codeでのセットアップ
Axe MCPサーバーはプロジェクトレベルまたはユーザーレベルで追加できます。
スコープを選択
- プロジェクトレベル: プロジェクトのルートディレクトリにファイルを作成します（チームと設定を共有するのに最適です）
.mcp.json. - ユーザーレベル：サーバーを
mcpServersオブジェクトに追加します。~/.claude.jsonホームディレクトリにある全プロジェクト共通で適用されます。また、ユーザーレベルのサーバーを管理するにはclaude mcp add --scope userコマンドを使用します — 詳細は Claude Code MCPドキュメンテーション を参照してください。
構成JSONの追加
以下の構成JSONを追加します。
すでに他のサーバーが定義されている場合は、 axe-mcp-server ブロックを既存の mcpServers オブジェクト内に追加します。
{
"mcpServers": {
"axe-mcp-server": {
"type": "stdio",
"command": "docker",
"args": [
"run",
"--add-host=host.docker.internal:host-gateway",
"-i",
"--rm",
"-e", "AXE_SERVER_URL",
"-e", "AXE_API_KEY",
"dequesystems/axe-mcp-server:latest"
],
"env": {
"AXE_SERVER_URL": "https://axe.deque.com",
"AXE_API_KEY": "${AXE_API_KEY}"
}
}
}
}この構成は "AXE_API_KEY": "${AXE_API_KEY}" を使用して安全な入力処理を行います。 ${AXE_API_KEY} 構文はClaude Codeにシェル環境から値を取得するよう指示します。詳細は Claude Code MCPドキュメンテーションを参照してください。
地域、プライベートクラウド、またはオンプレミスのaxeインスタンスを使用していますか？ を更新し、次の AXE_SERVER_URL 値を env ブロックでインスタンスのベースURLに設定します：
"env": {
"AXE_API_KEY": "${AXE_API_KEY}",
"AXE_SERVER_URL": "https://your-axe-instance.example.com"
}省略した場合、サーバーはデフォルトで https://axe.deque.com （Dequeの共有US SaaSインスタンス）に設定されます。詳細は 設定オプション を参照してください。
APIキーの設定
シェルの環境変数としてAPIキーを設定します：
export AXE_API_KEY="your-api-key-here"永続的な設定のために、この行をシェルプロファイル（~/.bashrc、 ~/.zshrcなど）に追加します。
OAuth 2.0 認証の使用
APIキーの代わりにOAuthを使用する方は、上記の設定を以下に置き換えてください。これによりサーバーが起動するたびに @deque/axe-auth token を使用して新しいアクセストークンを取得します。
設定を行う前に、 ステップ1：認証 をOAuth 2.0 認証ガイドで完了してください。
{
"mcpServers": {
"axe-mcp-server": {
"type": "stdio",
"command": "sh",
"args": [
"-c",
"docker run --add-host=host.docker.internal:host-gateway -i --rm -e \"AXE_ACCESS_TOKEN=$(npx -y @deque/axe-auth token)\" dequesystems/axe-mcp-server:latest"
]
}
}
}地域、プライベートクラウド、またはオンプレミスのaxeインスタンスを使用していますか？ をDockerコマンドに追加し、 AXE_SERVER_URL を追加します。 env ブロックでインスタンスのベースURLに設定します：
"args": [
"-c",
"docker run --add-host=host.docker.internal:host-gateway -i --rm -e AXE_SERVER_URL -e \"AXE_ACCESS_TOKEN=$(npx -y @deque/axe-auth token)\" dequesystems/axe-mcp-server:latest"
],
"env": {
"AXE_SERVER_URL": "https://your-axe-instance.example.com"
}省略した場合、サーバーはデフォルトで https://axe.deque.com （Dequeの共有US SaaSインスタンス）に設定されます。詳細は 設定オプション を参照してください。
この設定は、 sh -c を使用してシェルの置換を許可します。 $(npx -y @deque/axe-auth token) はサーバー起動時に実行され、有効なアクセストークンをDockerコンテナに挿入します。 -y フラグは、最初の実行時に "進行してもよろしいですか？" というプロンプトをスキップします。 npx 通常、対話式でないシェルでの実行中に尋ねます。 AXE_API_KEY と一緒に設定しないでください。 AXE_ACCESS_TOKENを参照してください。
**Windowsユーザー：** この設定はPOSIXシェル (sh) とコマンド置換 ($(...)) を使用しますが、これは cmd.exe およびPowerShellにはデフォルトで利用できません。Git BashまたはWSLシェルからClaude Codeを実行して sh を使えるようにしてください。 PATHを参照してください。
使用と検証
設定後、Claude Codeを再起動してMCPサーバーをロードします。
- ターミナルからClaude Codeを起動します：
claude - 入力してMCPサーバーの接続を管理します
/mcp。 - 以下が表示されるはずです
axe-mcp-server、これらのanalyzeおよびremediateツールが利用可能です
Claude Codeの設定（推奨）
Claude Codeがaxe MCP Serverツールを正しく使用するように、次の指示を CLAUDE.md プロジェクトルートにあるファイルに追加します。これにより、Claudeは分析した後に修正するワークフローに従うよう指示されます。
# Accessibility Testing and Remediation Workflow
## MANDATORY WORKFLOW - DO NOT DEVIATE
When working with accessibility issues, you MUST follow this exact workflow:
### 1. Analysis Phase
When asked to analyze pages for accessibility issues, you MUST:
- Use the `analyze` tool to scan the page
- Do NOT manually identify accessibility issues
- Always provide the complete URL being analyzed
### 2. Remediation Phase
When asked to remediate or fix accessibility issues, you MUST:
- First use `remediate` tool for EACH violation found
- Provide the exact HTML element, rule ID, and issue description
- Review the remediation guidance before making any code changes
- Apply fixes based on the remediate tool's recommendations
- Do NOT manually fix accessibility issues without first using the remediate tool
### 3. Verification Phase
After applying fixes, you MUST:
- Re-run `analyze` to verify all issues are resolved
- Confirm zero violations before considering the task completeエージェント指示の詳細は、 AIエージェントの設定を参照してください。