mcpField
A
Aether WCAG Scanner

Aether WCAG Scanner

ローカル
allchemylabs.ai開発ツール11 週間前に更新

Aether WCAG Scanner について

Aether WCAG Scannerは、コーディングエージェント向けのMCPサーバーで、ウェブページのWCAG 2.1 AA違反をスキャンし、実ブラウザーで検証した修正案を返します。Playwrightとaxe-coreでデスクトップ、タブレット、モバイルの表示を調べ、オフラインのテンプレートや任意のホスト型エンジンによる修正案を利用できます。

主な機能

  1. 01Playwrightとaxe-coreで表示ページをスキャン
  2. 02デスクトップ、タブレット、モバイル表示を検査
  3. 03WCAGに基づく修正案の提示
  4. 04修正を再検査し回帰を報告
  5. 05ブラウザーなしでHTML断片を検査
  6. 06シングルページアプリのルートをスキャン

活用シーン

  1. 01公開ページのアクセシビリティ問題を検出
  2. 02コーディング作業で修正案を確認して適用
  3. 03修正で違反が解消したか検証
  4. 04ライブURLなしでHTML断片を検査

MCP 対応

stdio対応のMCPクライアントに、スキャン、修正案取得、変更検証、HTML検査、フィードバック送信の5ツールを公開します。APIキーなしでもスキャンとテンプレート修正はローカルで動作し、キーを設定するとホスト型エンジンの文脈に応じた修正案を利用できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"allchemylabs-aether-wcag-scanner": {
"command": "npx",
"args": [
"-y",
"@allchemylabs/aether-wcag-scanner"
],
"env": {
"ALLCHEMY_API_KEY": "<ALLCHEMY_API_KEY>"
}
}
}
}
起動コマンドnpx -y @allchemylabs/aether-wcag-scanner
設定が必要な環境変数
ALLCHEMY_API_KEYシークレットBeta API key from https://beta.allchemylabs.ai/?src=registry (optional: without it the scanner runs fully offline with template fixes)

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@allchemylabs/aether-wcag-scanner1.0.8

ツール

5

掲載時のツール一覧 · 1 週間前に更新

パラメーター型必須説明
spaobjectいいえ単一の URL ではなく、シングルページアプリの複数のルートをスキャンします。このブロックを指定すると SPA モードが選択されます。`url` とは同時に指定できません。
spa.routesarrayいいえスキャンするルートを手動で指定します(最大 100 件)。空の場合 = 自動検出。
spa.entryUrlstringはいSPA のエントリー URL(例:http://localhost:4200)
spa.frameworkenumいいえフロントエンドフレームワーク。「generic」の場合は自動検出されます。angular | react | vue | generic
spa.maxRoutesintegerいいえ自動検出するルートの最大数(デフォルトは 20)
urlstringいいえシングルページの対象 URL(例:http://localhost:3000)。これか `spa` のいずれかを指定してください。両方は指定できません。
maxFixesintegerいいえ修正を生成する違反項目の最大数(デフォルトは 10)。0 に設定するとスキャンのみ実行します(RAG 呼び出しなし)。
viewportenumいいえシングルページモードのみ:報告するビューポート。「all」はデスクトップ、タブレット、モバイルをスキャンします。all | desktop | tablet | mobile
minSeverityenumいいえ対象に含める最低重大度(デフォルトは "moderate")critical | serious | moderate | minor
verifyFixesbooleanいいえ生成した各修正について実際の axe を再実行し(元の HTML と修正後の HTML を比較)、有効性を測定します(デフォルトは true)

詳細

Aether WCAG Scanner

Claude Code、Cursor、Codex、その他のコーディングエージェント向けの MCP サーバーです。WCAG 2.1 AA のアクセシビリティ違反を検出し、問題を一覧表示するだけでなく、すぐに適用できる修正案を返します。

実際のブラウザー(Playwright + axe-core)を使って、デスクトップ、タブレット、モバイルの各ビューポートでページを検査します。その後、各違反に具体的な修正案を対応付けます。修正案には、修正済み HTML、関連する WCAG 達成基準、実装方法のコード例が含まれます。

キーなしで無料で利用できます。より品質が高く、文脈に即した修正案が必要な場合は、beta.allchemylabs.ai でベータキーを取得してください(GitHub でサインイン)。


他との違い

マークアップだけをもとに作業する AI コーディングエージェントは、ページの機能を推測する必要があります。Aether は実際のブラウザーでページを実行し、axe-core で測定します。また、提案する修正案はすべて WCAG 仕様に基づいているため、エージェントは推測ではなく測定結果をもとに作業できます。

コーディングエージェント単体Aether(オフライン)Aether(API キーあり)
ページの確認方法渡された HTML を読み取りますChromium でデスクトップ、タブレット、モバイルの各幅でページをレンダリングし、axe-core を実行します同左
測定できる内容マークアップから確認できる構造レンダリングされたページで axe が測定する内容:コントラスト、アクセシブルな名前、ARIA の使用状況、フォーカス可能な領域、ランドマーク同左
修正案モデルの一般知識に基づきますよくあるルールに対する決定論的なテンプレートまずテンプレートを使用し、次に WCAG コーパスの例を参照してからモデルを使います。引用された技法はすべて根拠の確認に合格しています
修正の確認方法設定しない限り確認されません修正した要素に対して axe を再実行し、解消された問題と新たに発生した問題を報告します同左
修正案の引用元モデルが記憶している内容axe のルールと重大度WCAG 達成基準と技法。却下された候補も表示されます
ネットワークエージェントによって異なりますなし。すべてローカルマシン上で実行されます修正リクエストはホスト型エンジンに送信されます。接続できない場合は、オフラインテンプレートにフォールバックします

インストール

/plugin marketplace add https://github.com/allchemylabs/claude-plugins.git
/plugin install aether-wcag-scanner@allchemylabs

Claude Code の公式マーケットプレイス掲載が開始されたら、そこから直接インストールすることもできます。

Claude Code 内で /plugin install を実行してインストールすると、Allchemy Labs API キーの入力が求められます。beta.allchemylabs.ai で取得したキーを貼り付けてください。ターミナルからインストールする場合(claude plugin install …)、または Claude にインストールを実行させる場合は、入力を求められません。そのため、インストール後に以下のコマンドでキーを設定してください。キーを変更する場合も、同じコマンドを実行します。

/plugin configure aether-wcag-scanner@allchemylabs

初回起動時にプラグインの依存関係がインストールされます(約1分)。初回スキャン時には、Playwright 用の Chromium がダウンロードされます。インストール直後に /mcp でサーバーが未接続と表示された場合は、少し待ってから /reload-plugins を実行してください。

キーなしでの実行

クラウドで修正案を利用するにはキーが必要なため、プラグインのインストール時にキーの入力が求められます。スキャナー自体はローカルで動作し、キーがなくても利用できます(たとえば、ターミナルからインストールした場合や npx 経由の場合)。すべての違反に対して、ローカルのテンプレートによる修正案が得られます。ベータキーを設定すると、ホスト型インサイトエンジンによる、品質が高く文脈に即した修正案を利用できます。beta.allchemylabs.ai で取得してください(GitHub でサインイン)。上記のプロンプトから設定するか、スキャン対象のプロジェクトの .env に ALLCHEMY_API_KEY=<key> を追加してください。


Claude Code 以外での使用(任意の MCP クライアント)

同じサーバーが npm と MCP Registry で @allchemylabs/aether-wcag-scanner として公開されています。stdio に対応する MCP クライアントなら、どれでも実行できます。

{
  "mcpServers": {
    "aether-wcag-scanner": {
      "command": "npx",
      "args": ["-y", "@allchemylabs/aether-wcag-scanner"],
      "env": { "ALLCHEMY_API_KEY": "<your beta key>" }
    }
  }
}

最初のスキャンでは、Playwright の Chromium を一度ダウンロードします(ディスク上で約 500 MB。ブラウザー本体とヘッドレスシェルを含みます)。 ALLCHEMY_API_KEY がなくても、スキャナーは完全にオフラインで動作し、テンプレートの修正案を返します。

Claude Code には、スキャン → レビュー → 修正 → 検証のループを実行する /wcag-scan スキルがあります。ほかのエージェントにはツールの説明と、接続時にサーバーから送られる指示のみが表示されるため、同じ動作を実現するには AGENTS.md をプロジェクトにコピーしてください(Codex はネイティブで読み込みます。Cursor と Windsurf ではルールファイルとして使用できます)。これがない場合、エージェントはブラウザースキャンを実行せずにページの HTML を取得して推測することがあります。

5 つのツール

ツール機能
aether_scan_and_fix推奨。 URL をスキャンします。または spa ブロックを使って、複数のルートを持つシングルページアプリをスキャンし、実際のブラウザーで検証済みの違反と修正案をまとめて返します。高速なスキャンのみの実行には、maxFixes: 0 を設定してください。
aether_get_fix特定の違反に対する修正案を取得します(実際のブラウザーで検証済み)。html を省略すると、代わりにルールレベルの説明(WCAG の達成基準と手法の例)を取得します。
aether_verify_fix実際の Playwright と axe を使って、修正を決定論的に検証します。URL を再スキャンするか、修正前と修正後の HTML を比較します。対象の問題が解消されたか、新たなリグレッションがあるか、適合性の差分が正味でどうなったかを報告します。
aether_check_htmlHTML スニペットを解析して問題を検出します。ライブ URL やブラウザーは不要です。
aether_submit_feedback修正案を評価(役に立った/役に立たなかった)し、ガイダンスエンジンの改善に役立てます。修正内容のフィードバックは、より良い修正案の蓄積に役立ちます。

Claude には、「localhost:3000 のアクセシビリティの問題を確認して修正して」のように、自然な言葉で頼んでください。適切なツールが選ばれます。

/wcag-scan スキル

/wcag-scan <url> を実行すると、スキャン → 違反のレビュー → 修正の適用 → 再スキャンによる検証 → 要約という、手順に沿ったワークフローを実行できます。このスキルは上記のツールを連携させ、ファイルを直接編集します。

フック

このプラグインは Claude Code に 2 つのフックを追加します。

  • セッション開始時: プラグインの依存関係と Chromium がインストールされているかを確認し、初回実行時にインストールします。
  • 編集後: Claude が HTML、JSX、TSX、Vue、Svelte のファイルを編集すると、ブラウザーを使わない簡易ヒューリスティックチェックでアクセシビリティに関する潜在的な問題を検出し、Claude に報告します。編集が妨げられることはなく、検出結果には誤検知が含まれる場合があります。

すべてのプロジェクトで編集後チェックを無効にするには、 /plugin configure aether-wcag-scanner@allchemylabs を実行し、編集後のアクセシビリティチェックを false に設定してください。1 つのプロジェクトでのみ無効(または再度有効)にするには、そのプロジェクトの .claude/settings.local.json に以下を追加します。

{ "env": { "AETHER_POSTEDIT_HOOK": "0" } }

そのプロジェクトで再度有効にするには "1" を使用してください。どちらの変更後も Claude Code を再起動してください。


シングルページアプリのスキャン

url の代わりに aether_scan_and_fix に spa ブロックを渡します。

{ "spa": { "entryUrl": "http://localhost:4200", "framework": "angular", "maxRoutes": 10 } }
  • entryUrl — アプリの起動先です。routes: [{ "path": "/settings", "name": "Settings" }] にルートを列挙しない限り、クライアント側リンクをたどってルートを検出します。
  • framework — angular、react、vue のいずれかを指定します。省略すると自動検出します。
  • maxRoutes — 検出するルート数の上限です。

ナビゲーションはクライアント側で行われます(ブラウザーコンテキストとアプリの状態はルート間で維持されます)。準備完了の判定には、DOM の静定、Angular の testability などのフレームワークフック、保留中リクエストの解消といった複数段階の安定性チェックを使います。長時間のポーリングや WebSocket があるアプリでデッドロックする Playwright の networkidle は使用しません。このため、networkIdle を設定した構成は拒否されます。

要件

  • Node.js >= 20
  • Chromium(初回実行時に自動インストール)

免責事項

Aether は、アクセシビリティの分析とガイダンスを行うツールです。このプラットフォームを使用するだけでは、ウェブサイト、アプリケーション、デジタルサービスが WCAG、ADA(Title II を含む)、欧州アクセシビリティ法、Section 508、EN 301 549、その他のアクセシビリティに関する法律や規格に適合することにはなりません。

自動スキャンで検出できるアクセシビリティ上の障壁は一部に限られます。「問題なし」という結果は、スキャナーの検出範囲内で指摘事項がなかったという意味であり、対象が法的要件に適合していることを意味するものではありません。

以下については、引き続きお客様の責任となります。

  • 有資格者とともに検出結果を確認すること
  • 基盤となるコードとコンテンツの問題を修正すること
  • 必要に応じて、手動テストや監査を実施または委託すること
  • 製品の変更に合わせてアクセシビリティを維持すること
  • お客様固有の義務について、法律上の助言を得ること

Aether は法律上の助言を提供するものではなく、アクセシビリティ監査や有資格の監査担当者が作成する VPAT/ACR に代わるものでもありません。

ライセンス

クライアント(このプラグイン)は MIT ライセンスです。ホスト型インサイトエンジンおよび関連する Allchemy Labs のサービスはプロプライエタリです。LICENSE と NOTICE をご覧ください。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。