Web Accessibility Testing MCP
Ronan Takizawa · コーディング
Web Accessibility Testing MCPは、AIクライアントにウェブページのアクセシビリティ問題を検査する能力を与えるオープンソースのModel Context Protocolサーバー。DequeのAxe-coreエンジンとPuppeteerを組み合わせており、Claude DesktopやCursorのようなアシスタントが、公開中のURLや生のHTML断片をテストし、WCAG 2.0、2.1、2.2への準拠状況を報告できる。ページを渡せば、どこがどう壊れているかの一覧が返ってくる。
Web Accessibility Testing MCP について
Web Accessibility Testing MCPとは
Web Accessibility Testing MCPは、しばしばa11y MCPと略される。AIコーディングアシスタントを、多くのプロ監査チームがすでに使っているエンジンにつなぐ、小規模なMCPアクセシビリティテストサーバーだ。Deque LabsのAxe-coreライブラリを包み、Puppeteerで実際のヘッドレスブラウザを動かす。そのためチェックは静的なマークアップではなく、レンダリング後のページに対して走る。
要点は置き場所にある。別のダッシュボードは不要。タブ間で結果をコピーする必要もない。URLを見てくれとアシスタントに頼めば、結果は普通のチャット返信として戻ってくる。コンポーネントを出荷する直前、プルリクエストの前にWCAG準拠の確認を素早く済ませたいとき、この点が効いてくる。
最大の制約ははっきり書いておく価値がある。これはコミュニティプロジェクトであり、Dequeの公式製品ではない。サポートはGitHubリポジトリから来るのであって、ベンダーのヘルプデスクではない。さらにAxe-coreが自動で検出できる範囲しかテストしない。多くの実際の問題をカバーするが、人間のレビュアーが見つけるすべてを捉えることはない。
はじめかた
- マシンにNode.js 18以降が入っていることを確認し、Claude Desktop、Claude Code、VS Code、CursorなどMCP対応クライアントを選ぶ。
- クライアントのMCP設定ファイルを開く。このファイルの場所はmacOS、Windows、Linuxで異なる。
- mcpServers配下にa11y-accessibilityという名前のエントリを追加し、コマンドにnpx、引数に -y a11y-mcp-server を指定する。
- 新しいツールが登録されるようクライアントセッションを再起動し、ツール一覧にサーバーが現れるのを確認する。
- wcag2aaのようなタグでURLをテストするようアシスタントに頼む。必要ならモバイル向けまたはデスクトップ向けにviewportの幅と高さを設定する。
AIツール情報
Web Accessibility Testing MCPの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：コンポーネントが新しいうちにアクセシビリティ問題を捕まえられる。Node.js環境とMCPクライアントが必要だ。
- QA・アクセシビリティ担当者：アシスタントを離れずに、同じステージングURLへ繰り返しWCAGチェックを実行できる。
- 専任の監査担当がいない小規模チーム：手動レビューに金を払う前に、まずAxe-coreで一度ざっと洗い出せる。
タスク
- 公開ページのテスト：サーバーを公開URLに向け、WCAGタグ付きの違反一覧を構造化データとして読む。
- HTML断片のテスト：生のマークアップを貼り付け、出荷前にチェックする。
- カラーコントラスト分析：文字と背景の組み合わせをWCAGのしきい値に照らして検証する。
- ARIA検証：スクリーンリーダーの出力を壊す、誤用や不足のあるARIA属性を見つける。
シーン
- コミット前チェック：いま編集したページに、同じコーディングセッションの中で手早くアクセシビリティ確認を走らせる。
- レスポンシブ確認：iPhone 12の幅のようなモバイルviewportでレイアウトを試し、デスクトップサイズでもう一度試す。
- リグレッション追跡：リデザイン後に同じURLを再テストし、ルールエンジンがまだ指摘する項目を比べる。
主な機能
URLとHTML断片のテスト
サーバーは任意の公開URL、または生のHTML文字列をテストする。手作業では確認しづらい公開ページと、エディタに残ったままの断片の両方をカバーできる。実行するたびに構造化されたレポートが返る。スクリーンショットは不要。アシスタントが違反内容をそのまま要約できる。
Axe-coreとPuppeteerの統合
チェックはDequeのAxe-coreエンジンを通り、Puppeteerが動かす実際のヘッドレスブラウザ内で実行される。これはAxe-coreアクセシビリティチェックであり、プロの監査チームが走らせるものと同じ種類だ。ページが完全にレンダリングされるため、結果はソースHTMLだけでなく、ユーザーが実際に読み込むものを反映する。多くのプロ向けツールが頼っているのと同じ検出ロジックである。
WCAG 2.0、2.1、2.2準拠テスト
wcag2aaのようなタグで、どの標準に対してテストするかを選ぶ。サーバーは内容を2.0、2.1、2.2のルールに照らしてチェックするので、全部を回すのではなく、プロジェクトが実際に狙うレベルに合わせられる。
カスタマイズ可能なviewportサイズ
幅と高さは設定可能で、既定値は1280×800。スマホサイズのviewportを指定すると、小さい画面でしか出ない問題が浮かび上がる。たとえば窮屈なタップ領域。あるいは狭い幅で崩れるコンテンツ。
カラーコントラストとARIAのチェック
よくある2つの失敗領域には専用ツールがある。カラーコントラスト分析ツールは文字と背景の組み合わせを検証し、ARIA検証は属性が正しく完全に使われているかを見る。どちらも目視では確認が面倒な問題を捉える。
ルール探索
ルール探索ツールは、どんなアクセシビリティルールがあり、それが何を意味するかを説明する。レポートに見覚えのない項目が挙がり、それが本当に問題かどうかを決める前に背景を知りたいときに役立つ。
画面向き固定の検出
サーバーは、特定の画面の向きを強制するコンテンツを指摘する。これはタブレット利用者や運動機能に制約のある人にとって重要で、向きが固定されるとページが使い物にならなくなることがある。
メリットとデメリット
メリット
- 既存のAIクライアント内で動くので、別のダッシュボードやアカウントを管理する必要がない。
- 無料かつオープンソースで、コード全体がGitHubで公開されている。
- 広く信頼されるアクセシビリティルールエンジンAxe-core上に構築されている。
- 公開URLと生のHTMLの両方をテストでき、開発の早い段階と遅い段階の両方をカバーする。
- 設定可能なWCAGタグとviewportサイズで、テスト範囲を制御できる。
デメリット
- 自動チェックは人間の判断が要る問題を取りこぼすので、手動監査の代わりにはならない。
- Node.js 18+ とMCP対応クライアントが必要で、気軽に使いたい非技術者には向かない。
- コミュニティプロジェクトでありDequeの公式製品ではないため、ベンダーのサポート窓口がない。
よくある質問
AIアシスタントをDequeのAxe-coreエンジンにつなぐAIアクセシビリティテストツールだ。これによりアシスタントは、ウェブページやHTML断片のアクセシビリティ問題とWCAG準拠状況をテストできる。エディタを離れたくない開発者にとってのアクセシビリティテストに便利である。尋ねれば、違反の一覧を構造化して返す。
関連コンテンツ
Web Accessibility Testing MCPに関連するツール、スキル、記事を探す。
Web Accessibility Testing MCPの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。