webability

WebAbility MCP

コーディングエージェントが対応できるアクセシビリティチェック：2つのエンジンでページをスキャンし、各問題の修正案を構造化して取得してから、修正が反映されたか再チェックします。

無料です。ホスト先は https://mcp.webability.io/mcp です。スキャンに API キーは不要です。MIT ライセンスです。

インストール

Claude Code（プラグイン）

/plugin marketplace add snayyar00/webability-mcp
/plugin install webability-accessibility@webability

または claude mcp add --transport http webability https://mcp.webability.io/mcp

Cursor：Cursor に追加

VS Code：VS Code にインストール · または次を実行 code --add-mcp '{"name":"webability","type":"http","url":"https://mcp.webability.io/mcp"}'

Claude.ai / ChatGPT / 任意の MCP クライアント：URL https://mcp.webability.io/mcp を指定してカスタムコネクターを追加します。

ローカル（ブラウザーはお使いのマシン上で動作するため、localhost を直接スキャンします）：npx -y -p @webability/mcp webability-mcp

取得できる内容

実際の出力例として、https://demo.vercel.store に対する scan_page の結果（抜粋）：

Found 16 high-confidence issue(s): 0 critical, 4 serious, 8 moderate, 4 minor.
20 additional finding(s) need human review — see incomplete[]. Do NOT auto-fix these.

missing_label · serious · WCAG 1.3.1 · input.text-md.w-full.rounded-lg
  fix: { op: "add-attribute", attribute: "aria-label" }   fixability: contextual
missing_table_scope · moderate · WCAG 1.3.1 · thead > tr > th:nth-of-type(1)   (vite.dev/guide)
  fix: { op: "add-attribute", attribute: "scope", value: "col" }   fixability: mechanical

verify_fix input.text-md.w-full.rounded-lg wcag=4.1.2
  NOT RESOLVED: 1 violation still present → "verified": false

• fix.op は add-attribute、set-attribute、remove-attribute、add-element、remove-element、add-text-content、suggest のいずれかです。
• fixability：mechanical = 指定どおりに適用します。contextual = 操作は既知ですが、値（代替テキスト、ラベル）には判断が必要です。visual = レンダリング結果が必要です。提案は行いますが、自動適用はしません。
• incomplete[] には人による対応が必要な検出結果（画像上のコントラスト、マーケティング用の代替テキスト）が含まれます。エージェントには、これらを修正しないよう指示されます。
• source：React ≤18 および Vue の開発ビルドでは、各問題にライブコンポーネントツリーから取得した {file, line, column, component} が含まれます。
• verify_fix は1つの要素を再スキャンし、安全が確認できない場合は失敗します。diff_scan はページの fixed[]、new[]、remaining[] を報告します。

無料

	利用できる内容
アカウントなし	ホストされたサーバーでスキャンおよびチェックツールを利用できます。IP ごとの適正利用制限：ブラウザースキャンは1時間あたり30回、AI による修正は1時間あたり10回
無料アカウント（クライアント内の OAuth プロンプト、またはローカルで npx -y @webability/cli login）	visual_audit（ビジョンパス）、start_audit / get_audit（完全なレポート）、webability-tunnel（ホストされたサーバーから localhost をスキャン可能にする機能）が追加されます

トライアル、クレジット、MCP の有料プランはありません。

対応していないこと

代替テキストに意味があるか、カスタムウィジェットがスクリーンリーダーで適切に動作するかは判断できません。ソースコード内の自動チェック項目を解消するために利用し、その後、支援技術でテストしてください。

ローカルとホスト版の比較

	Lite — ローカル stdio（npx / webability-mcp）	Full — ホスト版（https://mcp.webability.io/mcp）
アカウント	不要	スキャンツールには不要。ビジュアル監査と完全な監査には無料アカウント（OAuth サインイン）が必要
スキャン / 修正 / 検証	はい（お使いのマシン上）	はい
find_source	はい	いいえ
scan_history / generate_report_pdf	はい	いいえ
visual_audit / start_audit / get_audit	スタブとして掲載 → Full に接続してください（引き続き無料）	はい — アカウントがあれば無料
PostHog / ダッシュボード分析	任意の環境変数でのみ有効	ホスト版ではデフォルトで有効
localhost / プライベートアドレス	はい — ブラウザーはお使いのマシン上で動作します	トンネル経由 — 詳細は下記

ローカルの開発サーバーをスキャンする

Lite（stdio）を使用してください。 ブラウザーはお使いのマシン上で動作するため、http://localhost:3000 は通常どおり localhost としてアクセスできます。

claude mcp add webability-local -- npx -y -p @webability/mcp webability-mcp

ほかのクライアントでは、npx -y -p @webability/mcp webability-mcp を stdio サーバーとして追加します。

Full（ホスト版）は設計上、お使いのマシンに直接アクセスできません。 クラウド上で動作するため、ホスト版の localhost はホスト側の localhost を指します。フェッチの前にすべての URL を検査し、ループバック、プライベート、リンクローカルのアドレスは拒否されます。この検査がなければ、誰でもサーバーを内部サービスやクラウドのメタデータエンドポイントに向けられてしまいます。この検査は誰に対しても緩和されません。

ホスト型が必要な場合：webability-tunnel

CI、リモートエージェント、またはダッシュボードから起動するスキャンでは、処理にノートPCを介さないため、Lite を実行できません。そのような場合は、トンネルを開きます。

WEBABILITY_API_KEY=<your-token> npx -y -p @webability/mcp webability-tunnel --port 3000

https://tunnel.webability.io/t/<id>/ という URL とシークレットが出力されます。URL を url として、シークレットを tunnel_secret として渡してください。

「https://tunnel.webability.io/t/abc123.../ を、tunnel_secret <secret> と一緒にスキャンしてください」

お使いのマシンからリレーへ外向きに接続するため、URL は通常の公開ホスト名であり、上記の SSRF チェックも変更なく適用されます。これを機能させるために、何かを緩和しているわけではありません。ngrok と同じ仕組みですが、接続先が開発マシンの場合に重要となる違いが 3 つあります。

• URL は認証情報ではありません。 すべてのリクエストにシークレットヘッダーが必要です。URL だけでは 401 が返されます。URL はシェル履歴、CI ログ、スクリーンショットに漏れる可能性があります。
• 指定した 1 つのポートで、GET と HEAD だけがお使いのマシンに届きます。また、Authorization と Cookie は、データが外部から入る前に削除されます。
• 終了するとトンネルも終了します。 30 分経過した場合、5 分間アイドル状態が続いた場合、または Ctrl-C を押した場合に終了します。

URL とシークレットの両方を知っている人は、開発サーバーを閲覧できます。この 2 つはパスワードと同じように扱い、キーボードを操作する人がいる場合は、できる限り Lite を使用してください。

サードパーティのトンネル（ngrok、cloudflared）も使用できます。ホスト型スキャナーは、それらのホスト名も他の公開サイトと同様に扱います。ただし、URL を知っている人なら誰でも開発サーバーにアクセスできる状態になります。Vite を使っている場合は、どちらの方法でも、トンネルのホスト名を server.allowedHosts に追加してください。追加しないと、すべてのリクエストに 403 Blocked request が返されます。

start_audit は、どちらの接続方式でも例外です。Lite を使用している場合も、そのパイプラインは当社のサーバー上で実行されるため、localhost の URL にアクセスすることはできません。

ローカルオプション

任意の環境変数：

• セルフホストのバックエンドを使用する場合は、WEBABILITY_API_URL（デフォルトは https://api.webability.io）。
• MCP の初期化、tools/list、ツール呼び出しの使用状況イベントに対する PostHog MCP Analytics を有効にするには、POSTHOG_PROJECT_API_KEY または POSTHOG_API_KEY。
• EU またはセルフホストの PostHog へのデータ送信には、POSTHOG_HOST（デフォルトは https://us.i.posthog.com）。
• PostHog キーが設定されている場合でも PostHog MCP Analytics を強制的に無効にするには、WEBABILITY_POSTHOG_MCP_ANALYTICS=off。

スキャンエンジン

scan_page は 2 つのエンジンを並列で実行し、結果の重複を排除します。

エンジン	ルール数	対象
WebAbility の検出器	60+	グラデーションを考慮したコントラスト、分かりにくい名前、装飾アイコン、ランドマークの階層、ARIA の正確性、リンクの一貫性、ターゲットサイズ、キーボードトラップ
axe-core	104	業界標準の WCAG 2.2 ベースライン

3 層の出力（v1.2.1 以降）

各スキャンは次を返します。

• issues — 確度の高い違反項目。バグとして提示しても安全です。
• incomplete — 人による確認が必要な検出結果（グラデーションに対するコントラスト、マーケティング画像、framer-motion のアニメーション前の状態、axe-incomplete）。自動修正は絶対に行わないでください。
• summary — 重要度別の件数と incomplete の件数

これは axe-core の violations／incomplete／passes の区分に対応しており、エージェントが誤検知を破壊的な方法で「修正」するのを防ぎます。

構造化された修正（v1.6.0 以降）

scan_page、flow_scan、diff_scan、scan_html の各問題には、機械可読な修正内容と修正可能性の階層が含まれます。これにより、エージェントは説明文を解析せずに対応できます。

{
  "id": "wa-missing_button_type-a1b2c3",
  "fixability": "mechanical",
  "fix": { "op": "add-attribute", "attribute": "type", "value": "button", "currentValue": "", "needsManualReview": false }
}

フィールド	値
fix.op	add-attribute · set-attribute · remove-attribute · add-element · remove-element · add-text-content · suggest
fixability	mechanical — 値が確定しており、そのまま適用できます · contextual — 操作は確定していますが、値の判断が必要です（代替テキスト、ラベルなど） · visual — レンダリング結果が必要です（コントラスト、フォーカスリング、ターゲットサイズ）。修正案を提示しますが、自動適用はしないでください。

fix.value は、エンジンがすでに値を把握している場合にのみ含まれます。従来の fix.attribute／currentValue／suggestedValue／needsManualReview フィールドに変更はありません。get_rules には各ルールの階層が記載されているため、自動修正可能なルールをあらかじめ選択できます。

ソースの参照先（v1.6.0 以降）

React ≤18 または Vue の開発ビルドでは、scan_page、flow_scan、diff_scan が実行中のページのコンポーネントツリーを読み取り、各検出結果に JSX の呼び出し箇所を付加します。

{ "selector": "img#hero", "source": { "framework": "react", "file": "/app/src/Hero.tsx", "line": 12, "column": 5, "component": "Hero" } }

そのファイルを開けばよく、find_source で往復する必要はありません。React 19 では _debugSource が削除されたため、取得できるのは component のみです。プロダクションビルドにはツリーがないため、sourceRoot（Lite のみ）を渡すと、ポインターのない問題にはセレクターのトークン検索による sourceCandidates[] が付加されます。

出力の制御（v1.6.0 以降）

scan_page、flow_scan、scan_html、diff_scan は以下を受け付けます。

パラメーター	効果
minImpact	minor · moderate · serious · critical — 指定した値より低いものを除外します
rules[]	指定したルール ID のみを残します（missing_alt、image-alt、…）
wcag[]	指定した達成基準のみを残します。1.4 のような接頭辞は 1.4.3 にも一致します
format: "compact"	要素ごとに 1 行で出力し、ルールのメタデータは 1 回だけ表示します — JSON トークンを大幅に削減できます

フィルターは 50 件の上限を適用する前に処理されるため、300 件の問題があるページで minImpact: "serious" を指定すると、重大な問題がすべて返されます。scan_history アーカイブにはフィルター前の結果が保持されます。

プロセス内 scan_html（v1.6.0 以降）

scan_html はデフォルトではブラウザーを起動しなくなりました。MCP プロセス内で jsdom を使って WebAbility の検出器と axe-core を実行するため、数ミリ秒で完了し、ネットワークも不要です。scan_page と同じ 3 階層の issues／incomplete／summary 形式で結果を返し、すべての検出結果に fix.op が含まれます。断片は自動的にドキュメントでラップされます。jsdom にはレイアウトがないため、視覚層のルール（コントラスト、ターゲットサイズ、フォーカスリング）はスキップされ、skippedVisual にカウントされます。以前のヘッドレス Chromium による axe の実行経路を使うには、engine: "browser" を渡してください。

ツール

ツール	エディション	内容
scan_page	Lite + Full	URL をスキャンし、WCAG のアクセシビリティ問題を検出します（2 つのエンジン）。開発ビルドでは source ポインターを使用できます。minImpact / rules / wcag / format で出力を制御します
flow_scan	Lite + Full	複数ページにわたる一連の操作をスキャンし、ページ間で重複する問題を統合します
scan_html	Lite + Full	生の HTML スニペットまたはフラグメントをプロセス内でスキャンします（jsdom、ms、ブラウザー不要）。コントラストを調べるには engine: "browser" を指定します
detect_framework	Lite + Full	Tailwind / MUI / Bootstrap / Next.js / WP / プレーン CSS を検出します
generate_ai_fix	Lite + Full	フレームワークに合わせた修正案を生成します。コントラストの問題がある場合は、ライブ URL からブランドのカラーパレットを自動抽出します。
verify_fix	Lite + Full	修正した要素を再スキャンし、違反が解消されたことを確認します — verified: true/false。検出 → 修正 → 検証のループを完了します。
diff_scan	Lite + Full	ベースラインと現在の状態を比較し、fixed[] / new[] / remaining[] を返します。ページ単位のリグレッションチェックです。ベースラインには scan_history（Lite）またはライブ URL を使用します。
check_color_contrast	Lite + Full	色の組み合わせについて WCAG コントラストをチェックします。url を渡すと、ライブページに合わせたブランドカラーの提案を取得できます
check_aria	Lite + Full	HTML スニペット内の ARIA 属性を検証します
get_rules	Lite + Full	fixability と fix オペレーションのテンプレートを含む、axe-core + WebAbility のルール一覧を表示します。タグ、ティア、エンジンで絞り込めます
find_source	Lite のみ	CSS セレクターをローカルのソースファイルに対応付けます（ページにフレームワークの source ポインターがない場合の代替手段）
scan_history	Lite のみ	~/.webability/scans/ 以下にある過去のローカルスキャンを参照します
generate_report_pdf	Lite のみ	スキャン結果を、プロジェクトと同じ場所に保存されるブランド付きの WebAbility アクセシビリティレポート PDF に変換します — 無料、アカウント不要です。scan_page の issues[] を渡します。完全な監査成果物（Excel + エビデンス）には、start_audit を使用してください。
visual_audit	Full（アカウントがあれば無料。Lite ではスタブ）	ビジョン機能を使ったピクセルレベルの監査です（アイコンのコントラスト、フォーカスの視認性、ボタンのように見えるがボタンではない要素など）
start_audit	Full（アカウントがあれば無料。Lite ではスタブ）	サーバー側で完全な監査成果物（レポート + Excel ワークブック）の作成を開始します。ポーリング用の ID を返します。
get_audit	Full（アカウントがあれば無料。Lite ではスタブ）	監査の進捗を確認し、完了後に重要度の概要とレポート／ワークブックのダウンロード URL を取得します。

この MCP を使う場面

• 新しいコンポーネントを構築し、最初からアクセシブルにしたい
• プッシュする前に、localhost / ステージングビルドを監査したい
• Lighthouse / axe のレポートをトリアージしたい — scan_page は両方のエンジンの結果を統合します
• 使用中のフレームワークに合った修正案を生成したい
• 一般的な提案ではなく、ユーザーの実際のブランドカラーパレットに基づいてコントラストを確認したい

使用例

Cursor / Claude Code で：

「localhost:3000 をスキャンして、アクセシビリティの問題を見つけて」

「ログイン → ダッシュボード → チェックアウトの流れをたどり、一連の操作全体で重複しない問題を報告して」

「https://example.com の .btn-primary にあるコントラストの問題について、ブランドカラーに合わせた修正案を提案して」

「WCAG 1.4.11 では何をチェックしますか？」

「localhost:3000 で見つけた問題を、ブランド付き PDF レポートにまとめて」

プライバシー、スキャンログ、テレメトリー

すべてのスキャンはローカルの ~/.webability/scans/ に記録されます。1スキャンにつき1行の index.jsonl 台帳と、直近500件のスキャンの完全な結果が保存されます。scan_history ツール（「以前に何をスキャンしましたか？」）または通常の jq で確認できます。無効にするには WEBABILITY_SCAN_LOG=off を、保存先を変更するには WEBABILITY_SCAN_LOG_DIR を設定してください。

サーバーは各ツール呼び出し（スキャンだけでなく、すべてのツール）について、WebAbility API に小規模なテレメトリーイベントも送信します。送信されるのは、ツール名、短い対象ラベル（URL、セレクター、問題の種類。ページの内容は含まれません）、成功／失敗、所要時間、問題の件数、永続的な匿名インストール ID です。完全なスキャン結果、HTML、生成された修正コードがテレメトリーを通じて端末の外に送信されることはありません。オプトアウトするには WEBABILITY_SCAN_TELEMETRY=off を設定してください。

POSTHOG_PROJECT_API_KEY または POSTHOG_API_KEY が設定されている場合、サーバーでは PostHog MCP Analytics も有効になります。これにより、initialize、tools/list、ツール名、所要時間、クライアント名／バージョン、成功／失敗などの MCP 使用状況メタデータが収集されます。WebAbility は送信前に PostHog の $mcp_parameters および $mcp_response フィールドを削除するため、この連携によって生の HTML スニペット、スクリーンショット、スキャン結果、生成されたコードが PostHog に送信されることはありません。

2つのツール、generate_ai_fix と visual_audit は、WebAbility がユーザーに代わってサードパーティの LLM を呼び出せるよう、ページの内容（HTML スニペットまたはスクリーンショット）も WebAbility の API に送信します。WebAbility がその内容を保存することはありませんが、転送中に LLM プロバイダーがその内容を確認できます。ツールごとの詳細と WebAbility のプライバシーポリシーについては、PRIVACY.mdを参照してください。

リンク

• WebAbility — プラットフォーム、ウィジェット、ダッシュボード
• ドキュメント
• GitHub

ライセンス

MIT