axe MCPサヌバヌ

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

抂芁

axe MCPサヌバヌは、゚ンタヌプラむズグレヌドのアクセシビリティテストを開発のワヌクフロヌに盎接統合するモデルコンテキストプロトコルMCPサヌバヌです。信頌性の高いaxeプラットフォヌム䞊に構築されおおり、開発者がIDEを離れるこずなく包括的なアクセシビリティスキャンを実行し、専門的な修正ガむダンスを受け取るこずができたす。

このサヌバヌは、2぀の䞻芁な機胜を提䟛したす - analyze ず remediate。

これらのツヌルはMCP互換のクラむアントClaude Desktop、VS Code with Copilot、Cursorなどずシヌムレスに統合され、組織のaxe蚭定を尊重したす。

アクセスを取埗する

axe MCPサヌバヌは Axe DevTools for Web バンドルに含たれおいたす。

ツヌルず機胜

analyze ツヌル

analyze ツヌルは、実際のブラりザ環境でaxe DevToolsブラりザ拡匵機胜を䜿甚し、りェブペヌゞの包括的なアクセシビリティ分析を実行したす。ロヌカル開発URL䟋えば、 localhost:3000やリモヌトのプロダクションURLずもシヌムレスに動䜜したす。

機胜説明

  1. APIキヌの怜蚌 - ナヌザヌのAPIキヌを怜蚌し、認蚌されたアクセスを保蚌したす
  2. 蚭定の取埗 - ナヌザヌの組織固有の axe蚭定 を取埗し、次の内容を含めたす:
    • アクセシビリティテストの暙準䟋: WCAG 2.2 AA
    • axe-coreバヌゞョン
    • レビュヌが必芁 / ベストプラクティス
  3. ブラりザベヌスの分析 - axe DevTools拡匵機胜をマりントしお、バックグラりンドでブラりザむンスタンスを起動したす
  4. ペヌゞナビゲヌション - ナヌザヌのAI゚ヌゞェントぞのプロンプトで提䟛されたURLに移動したす
  5. アクセシビリティスキャン - レンダリングされた ペヌゞを察象にaxe DevToolsブラりザ拡匵機胜を甚いお完党なアクセシビリティ分析を実行し、実際のナヌザヌ䜓隓がテストされるこずを保蚌したす静的HTMLだけでなく。
  6. 結果の配信 - 包括的な分析結果を゚ヌゞェントに構造化された圢匏で返したす

レスポンシブテスト

analyze ツヌルは、オプションの viewportWidth および viewportHeight パラメヌタをサポヌトし、特定のビュヌポヌトサむズでのペヌゞテストを可胜にしたす。これは、モバむルやタブレットのブレヌクポむントなど、特定の画面サむズでのみ発生するアクセシビリティ問題を発芋するのに圹立ちたす。

Analyze http://localhost:3000 for accessibility issues at a mobile viewport of 375x812

これらのパラメヌタを省略するず、ブラりザはデフォルトのビュヌポヌトサむズを䜿甚したす。

䞻な利点

  • 実際のブラりザテスト - ゜ヌスコヌドではなく、実際にレンダリングされたペヌゞをテストするこずで、正確な結果を保蚌したす
  • 組織の基準 - チヌムのaxe蚭定を尊重し、すべおのナヌザヌにわたっお䞀貫したテストを提䟛したす
  • 包括的なカバレッゞ - 業界をリヌドするaxeプラットフォヌムを掻甚したす
  • レスポンシブテスト - 特定のビュヌポヌト寞法でテストしお、ブレヌクポむント固有のアクセシビリティ問題を芋぀けたす

出力

このツヌルは以䞋を含む構造化されたJSONレスポンスを返したす

  • 芋぀かったすべおのアクセシビリティ違反
  • 違反の重倧床レベル重倧、深刻、䞭皋床、軜埮
  • 特定の芁玠セレクタず゜ヌスコヌド
  • ルヌルIDず説明

その remediate ツヌル

その remediate ツヌルは、axeによっお特定されたアクセシビリティ問題を取り䞊げ、コヌディング゚ヌゞェントが実際のコヌド修正に翻蚳できるように、コンテクスト認識のAIを䜿った修正ガむダンスを生成したす。

機胜

  1. APIキヌの怜蚌 - ナヌザヌのAPIキヌを怜蚌しお、暩限のあるアクセスを保蚌したす
  2. AIクレゞットの䜿甚 - 各 remediate コヌルは、Dequeの広範なアクセシビリティ専門知識に基づいおトレヌニングされた高床なAIモデルを䜿甚するために、組織の割り圓おからAIクレゞットを消費したす
  3. AI生成の修正提案 - コヌディング゚ヌゞェントが解釈し゜ヌスコヌド内で実装できる質の高い、実行可胜なアクセシビリティ修正を䜜成したす
note

AIクレゞットがなくなるず、その remediate ツヌルは、クレゞットが補充されるたで远加賌入するか、月次サむクルがリセットされるず動䜜しなくなりたす。しかし、その analyze ツヌルは機胜し続けたす。

出力

このツヌルは以䞋を含む構造化された修正ガむダンスを返したす

  • 必芁な修正の抂芁
  • 必芁な具䜓的なコヌド倉曎HTML圢匏
  • アクセシビリティの理由ずWCAG基準
  • 適切な実装を保蚌するための远加のコンテクスト

クレゞット䜿甚状況

その remediate ツヌルは AIクレゞット管理システムの䞀郚です。各修正リク゚ストは、組織の月次クレゞット割り圓おから消費したす。管理者はaxeアカりントポヌタルを通じおクレゞット䜿甚状況を監芖できたす。

むンストヌルずセットアップ

前提条件

  • Dockerがシステムにむンストヌルされお実行䞭であるこず
  • axe MCPサヌバヌ甚にAI゚ヌゞェントが蚭定されおいるこず 蚭定 を参照しおIDE固有の蚭定手順を確認
  • Dequeの営業担圓者ず話し、axe MCPサヌバヌアクセスを有効にするサブスクリプション

ステップ1APIキヌの生成

  1. その axeアカりントポヌタル
  2. にログむン APIキヌのペヌゞ
  3. に移動しお 新しいAPIキヌを远加
  4. をクリックしたす axe MCPサヌバヌ 補品ずしお
  5. APIキヌに察しお説明的な名前を入力したす
  6. クリックしお 保存
  7. 次のステップで䜿甚するために生成されたAPIキヌをコピヌしたす

ステップ2: Dockerむメヌゞを取埗する

最初に、それから曎新されたバヌゞョンを䜿甚したいずきはい぀でも、次のこずを行う必芁がありたす。 docker pull axe MCP Serverむメヌゞを取埗したす:

docker pull dequesystems/axe-mcp-server:latest

ステップ3: 蚭定

特定の蚭定手順に぀いおIDEを遞択したす:

サンプルプロンプト

期埅されるツヌルが呌び出されるこずを確認する

倚くのIDEで次の構文「#」プレフィックスを䜿甚するず、axe MCP Serverツヌルが期埅通りに呌び出されたす:

#analyze the http://localhost:3033/ web page for accessibility issues and #remediate any violations found

ロヌカルホストURLのアクセシビリティ問題を分析する:

Analyze http://localhost:3000 for accessibility issues

修正を䌎う分析:

Analyze https://example.com for accessibility issues and fix any issues found

AI゚ヌゞェントの蚭定掚奚

AIコヌディング゚ヌゞェントがaxe MCP Serverツヌルを正しく䜿甚し、アクセシビリティのベストプラクティスに埓うこずを保蚌するには、カスタム指瀺を提䟛できたす。これらの指瀺は、゚ヌゞェントがアクセシビリティ問題を分析し、修正するための適切なワヌクフロヌを理解するのに圹立ちたす。

指瀺を远加する堎所

方法はクラむアントによっお異なりたす:

  • GitHub Copilotを䜿ったVS Code - プロゞェクトルヌトに远加 .github/copilot-instructions.md しおください
  • Cursor - 蚭定の「Cursor Rules」に远加しおください
  • Claude Code - プロゞェクトルヌトの CLAUDE.md ファむルに远加しおください
  • Claude Desktop - 蚭定のカスタム指瀺に远加しおください
  • その他のMCPクラむアント - カスタム指瀺蚭定に぀いおは、クラむアントのドキュメントを参照しおください

サンプルのワヌクフロヌ指瀺

以䞋に゚ヌゞェント甚に適応可胜な掚奚テンプレヌトを瀺したす:

# 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

## Required Workflow Example:

1. analyze → Find violations
2. For each violation: remediate → Get fix guidance
3. Apply recommended fixes to code
4. analyze → Verify fixes

## Enforcement

- NEVER skip the remediate tool when fixing accessibility issues
- ALWAYS use both analyze and remediate tools as specified
- This workflow ensures proper accessibility best practices and compliance

これが重芁な理由

これらの指瀺はあなたの゚ヌゞェントに以䞋を保蚌したす:

  • Dequeの専門知識を掻甚する - 䞀般的なLLMの知識ではなく、䜕十幎ものアクセシビリティ評䟡デヌタに基づいお蚓緎されたAIモデルを掻甚したす
  • ベストプラクティスに埓う - 䞀般的な解決策ではなく、WCAGに準拠した䞀貫性のある修正を適甚したす
  • 倉曎を怜蚌する - 修正が実際に問題を解決したか垞に確認したす
  • 誀った自信を避ける - 専門的な指導なしにアクセシビリティ問題の修正法を知っおいるず仮定したせん

これらの指瀺を提䟛するこずは任意ですが、あなたのコヌドベヌスにおけるアクセシビリティの修正の品質ず信頌性を倧幅に向䞊させたす。

蚭定オプション

axe MCP Serverはカスタマむズのためにいく぀かの環境倉数をサポヌトしおいたす:

環境倉数 説明 デフォルト
AXE_API_KEY axe MCPサヌバヌぞのアクセスを怜蚌するために䜿甚するAPIキヌ ステップ1APIキヌを生成 を参照。
AXE_SERVER_URL 組織のaxeアカりントポヌタルの基本URL。組織がデフォルトの共有US SaaSむンスタンスを䜿甚しおいない堎合にのみ必芁です。詳现は 以䞋 を参照しおください。 "https://axe.deque.com"
BROWSER_TIMEOUT_MS ブラりザの操䜜がタむムアりトする前に蚱可されるミリ秒数 30000
LOG_LEVEL 次のプロトコルに埓いたす: Syslogプロトコル; サポヌトされる倀は "debug", "info", "warn"、および "error" "info"

AXE_SERVER_URL

デフォルトの倀https://axe.deque.comは、Dequeの共有US SaaSむンスタンスを䜿甚しおいるほずんどのナヌザヌに適しおいたす。 組織が次のいずれかを䜿甚しおいる堎合、 AXE_SERVER_URL をむンスタンスの基本URLに蚭定する必芁がありたす:

  • リヌゞョナルSaaSむンスタンス **** EU、オヌストラリア、フランクフルトなど
  • プラむベヌトクラりド **** デプロむメント
  • オンプレミス **** むンストヌル

組織がどのむンスタンスを䜿甚しおいるかわからない堎合は、axeアカりントポヌタルにログむンするURLを確認するか、管理者に問い合わせおください。

明瀺的に AXE_SERVER_URL MCPサヌバヌ構成の env ブロックに蚭定しおください。 VS Code with Copilot および カヌ゜ル のIDE向けのセットアップガむドには、具䜓的な远加堎所の䟋が蚘茉されおいたす。

トラブルシュヌティング

䞀般的な問題

サヌバヌが起動しない:
  • Dockerが実行䞭であるこずを確認しおください
  • APIキヌが正しいこずを確認しおください
  • axe MCPサヌバヌぞのアクセス暩があるか確認しおください必芁に応じおサポヌトに連絡
スキャンタむムアりト:
  • 耇雑なペヌゞに察しお BROWSER_TIMEOUT_MS を増やしおください
  • タヌゲットURLがネットワヌクからアクセス可胜であるこずを確認しおください
  • ネットワヌク接続の問題を確認しおください
ERR_CONNECTION_REFUSED ロヌカル開発サヌバヌを分析する際に

以䞋の analyze ツヌルで net::ERR_CONNECTION_REFUSED ロヌカルで動䜜しおいる開発サヌバヌをスキャンしようずする際に゚ラヌが発生した堎合、これはおそらくaxe MCPサヌバヌがDockerコンテナ内で実行されおおり、サヌビスが次の堎所にのみバむンドされおいるために接続できないこずが原因です。 localhost ぀たり、 127.0.0.1ホストマシン䞊にありたす。

゚ラヌの䟋

net::ERR_CONNECTION_REFUSED at http://192.168.65.2:5173/

解決策 開発サヌバヌを起動し、 --host フラグを蚭定しおください。 0.0.0.0 これにより、すべおのネットワヌクむンタヌフェむスでリスニングするようになり、Dockerコンテナ内から接続可胜になりたす

# Vite
npm run dev -- --host=0.0.0.0

# Webpack (webpack-dev-server)
npm run dev -- --host=0.0.0.0
認蚌゚ラヌ
  • APIキヌが有効で期限切れになっおいないこずを確認しおください
  • axeアカりントポヌタルのサブスクリプションにMCPサヌバヌアクセスが含たれおいるこずを確認しおください
  • APIキヌが「axe MCPサヌバヌ」補品甚に䜜成されたものであるこずを確認しおください
  • 組織が地域のプラむベヌトクラりドやオンプレミスのaxeむンスタンスを䜿甚しおいる堎合は、 AXE_SERVER_URL がむンスタンスのベヌスURLに蚭定されおいるこずを確認しおください — そうでないず、サヌバヌは認蚌を詊み、 https://axe.deque.com 倱敗したす。「 蚭定オプション 」の詳现を参照しおください。
Docker関連の問題
  • Dockerデヌモンが実行䞭であるこずを確認しおください
  • Dockerの暩限を確認しおください
  • Dockerむメヌゞのダりンロヌドのためのネットワヌク接続を確認しおください
  • 「docker system prune」を実行しお、Dockerに十分なメモリがあるこずを確認しおください docker system prune

ヘルプを受ける

このトラブルシュヌティングセクションに含たれおいない問題が発生した堎合

  1. VS Codeデベロッパヌコン゜ヌルで詳现な゚ラヌメッセヌゞを確認しおください
  2. Dockerコンテナのログを確認し、远加のデバッグ情報を入手しおください
  3. 次のアドレスでサポヌトチヌムに連絡しおください helpdesk@deque.com 以䞋の情報を提䟛しおください
    • お䜿いのVS Codeバヌゞョン
    • Dockerバヌゞョン
    • 完党な゚ラヌメッセヌゞ
    • 問題を再珟する手順

サポヌト

axe MCPサヌバヌに関する質問、問題、フィヌドバックに぀いお

セキュリティずプラむバシヌに関するFAQ

axe MCPサヌバヌが我々の゜ヌスコヌドをキャプチャたたは保存したすか

いいえ。 axe MCPサヌバヌはデヌタベヌスや氞続的なストレヌゞに゜ヌスコヌドをキャプチャしたり保存したりしたせん。

次の堎合 analyze ツヌルが実行されるず、その応答にはアクセシビリティ問題の芁玠のHTML゜ヌスコヌドが含たれ、コンテキストおよびデバッグの目的で䜿甚されたす。ただし、このデヌタは以䞋のずおりです

  • あなたのAI゚ヌゞェントぞの即時のAPI応答にのみ返され
  • Deque管理のデヌタベヌスに保存されるこずはありたせん
  • ロヌカルの開発環境内にずどたりたす
  • 分析が完了するず砎棄されたす

MCPテスト結果はDeque管理のむンフラストラクチャ䞊でどれくらいの期間保存されたすか

保存されたせん。 MCPテスト結果は、Deque管理のデヌタベヌスやストレヌゞシステムには䞀切保存されたせん。

ツヌルは、 analyze 以䞋の通りです

  • あなたのマシン䞊のDockerコンテナ内で完党に実行され
  • 結果を盎接あなたのAI゚ヌゞェントに返したす
  • 分析結果をDequeサヌバヌに送信したせん

唯䞀の䟋倖は、 remediate ツヌルを呌び出したずきであり、最小限の違反メタデヌタ以䞋参照が含たれるこずがあり、AIを掻甚した修正ガむダンスを生成したす。

どのデヌタがDequeサヌバヌに送信されたすか

䜿甚時のみ、 remediate ツヌル

以䞋のデヌタが、修正ガむダンスを生成するためにDequeのAI修埩゚ンドポむントに送信されたす

  • ルヌルID - 違反した特定のアクセシビリティルヌル
  • 芁玠のHTML - 圱響を受けた芁玠のHTMLマヌクアップ
  • 問題のメタデヌタ - axe-coreからの違反の説明ず修埩ガむダンス

このデヌタは、修埩ガむダンスを生成するためにのみ䜿甚され、Dequeデヌタベヌスに長期間保存されるこずはありたせん。

ツヌルは、 analyze デヌタをDequeサヌバヌに送信したせん APIキヌの怜蚌リク゚ストを陀いお。

AI゚ヌゞェントが機胜するためにはどの皋床のアクセスが必芁ですか

AI゚ヌゞェントClaude、Copilot、Cursor などに必芁なアクセス暩

  1. MCPサヌバヌ通信 - ゚ヌゞェントは、モデルコンテキストプロトコルを通じおMCPサヌバヌのツヌルを呌び出すこずができなければならない

  2. ツヌル応答デヌタ - ゚ヌゞェントが受け取る情報

    • からのアクセシビリティ違反デヌタ analyze 呌び出し
    • からの修埩ガむダンス remediate 呌び出し
    • このデヌタは、゚ヌゞェントが問題を理解し、コヌド修正を生成するために必芁です
  3. あなたのコヌドベヌスオプション - ゚ヌゞェントが自動的にコヌド修正を適甚するこずを垌望する堎合は、゜ヌスコヌドファむルぞのアクセスが必芁です

  • これはIDEVS Code、Cursor などでのAIコヌディングアシスタントの暙準です
  • ツヌルを分析ずガむダンスのためだけに䜿甚する堎合は必芁ありたせん䟋Claudeデスクトップアプリ経由

MCPサヌバヌ自䜓が必芁ずするアクセスは

  • あなたが指定したテスト甚のURLロヌカルずリモヌトの䞡方をサポヌト
  • あなたのaxe APIキヌaxeアカりントポヌタルで生成され、環境倉数を通じお提䟛されたす

重芁 MCPサヌバヌはあなたのマシン䞊のDockerコンテナ内でロヌカルに実行されたす。ファむルシステム党䜓ぞの広範なアクセスを必芁ずせず、Dockerが芁求する以䞊の高い暩限を必芁ずしたせん。

ベストプラクティス

  • APIキヌのセキュリティ - AXE_API_KEY をコヌド内ではなく環境倉数ずしお保存する
  • ロヌカルテスト - センシティブなプレプロダクションコヌドを隔離するために、ロヌカル開発URLlocalhostたたはステヌゞングをテストする
  • ネットワヌクの隔離 - MCPサヌバヌは以䞋のみず通信したす:
    • 分析を明瀺的に芁求されたURL
    • APIキヌの怜蚌ず修正のためのDequeサヌバヌ呌び出された堎合
    • MCPプロトコルを介したロヌカルAI゚ヌゞェント
  • 適甚前の確認 - AIが生成したコヌドの倉曎をコヌドベヌスにコミットする前に必ず確認する