Aether WCAG Scanner について
Aether WCAG Scannerは、コーディングエージェント向けのMCPサーバーで、ウェブページのWCAG 2.1 AA違反をスキャンし、実ブラウザーで検証した修正案を返します。Playwrightとaxe-coreでデスクトップ、タブレット、モバイルの表示を調べ、オフラインのテンプレートや任意のホスト型エンジンによる修正案を利用できます。
主な機能
- 01Playwrightとaxe-coreで表示ページをスキャン
- 02デスクトップ、タブレット、モバイル表示を検査
- 03WCAGに基づく修正案の提示
- 04修正を再検査し回帰を報告
- 05ブラウザーなしでHTML断片を検査
- 06シングルページアプリのルートをスキャン
活用シーン
- 01公開ページのアクセシビリティ問題を検出
- 02コーディング作業で修正案を確認して適用
- 03修正で違反が解消したか検証
- 04ライブURLなしでHTML断片を検査
MCP 対応
stdio対応のMCPクライアントに、スキャン、修正案取得、変更検証、HTML検査、フィードバック送信の5ツールを公開します。APIキーなしでもスキャンとテンプレート修正はローカルで動作し、キーを設定するとホスト型エンジンの文脈に応じた修正案を利用できます。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
npx -y @allchemylabs/aether-wcag-scannerALLCHEMY_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 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。
ツール
5掲載時のツール一覧 · 1 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| spa | object | いいえ | 単一の URL ではなく、シングルページアプリの複数のルートをスキャンします。このブロックを指定すると SPA モードが選択されます。`url` とは同時に指定できません。 |
| spa.routes | array | いいえ | スキャンするルートを手動で指定します(最大 100 件)。空の場合 = 自動検出。 |
| spa.entryUrl | string | はい | SPA のエントリー URL(例:http://localhost:4200) |
| spa.framework | enum | いいえ | フロントエンドフレームワーク。「generic」の場合は自動検出されます。angular | react | vue | generic |
| spa.maxRoutes | integer | いいえ | 自動検出するルートの最大数(デフォルトは 20) |
| url | string | いいえ | シングルページの対象 URL(例:http://localhost:3000)。これか `spa` のいずれかを指定してください。両方は指定できません。 |
| maxFixes | integer | いいえ | 修正を生成する違反項目の最大数(デフォルトは 10)。0 に設定するとスキャンのみ実行します(RAG 呼び出しなし)。 |
| viewport | enum | いいえ | シングルページモードのみ:報告するビューポート。「all」はデスクトップ、タブレット、モバイルをスキャンします。all | desktop | tablet | mobile |
| minSeverity | enum | いいえ | 対象に含める最低重大度(デフォルトは "moderate")critical | serious | moderate | minor |
| verifyFixes | boolean | いいえ | 生成した各修正について実際の 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_html | HTML スニペットを解析して問題を検出します。ライブ 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 をご覧ください。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。