Web アクセシビリティ テスト MCP サーバー (A11y MCP)
A11y MCP は、LLM に Web アクセシビリティ テスト API へのアクセスを提供する MCP (モデル コンテキスト プロトコル) サーバーです。
このサーバーは、Deque Axe-core API と Puppeteer を使用して、LLM が Web コンテンツの WCAG 準拠を分析し、アクセシビリティの問題を特定できるようにします。
注意: これは Deque Labs の公式 MCP サーバーではありません。
プロジェクトを楽しんだら星を付けてください！🌟
特徴
ウェブページのテスト: 公開 URL のアクセシビリティ問題をテストします
HTML スニペットのテスト: 生の HTML 文字列のアクセシビリティ問題をテストします
WCAG コンプライアンステスト: さまざまな WCAG 標準 (2.0、2.1、2.2) に照らしてコンテンツをチェックします。
カスタマイズ可能なテスト: テストするアクセシビリティタグ/標準を指定します
ルール探索: 利用可能なアクセシビリティルールに関する情報を取得する
色コントラスト分析: WCAG準拠の色の組み合わせをチェック
ARIA 検証: ARIA 属性の適切な使用をテストする
画面の向きのロック検出: 特定の画面の向きを強制するコンテンツを識別します
Related MCP server: Web Accessibility MCP Server
インストール
このサーバーを Claude Desktop で使用するには、MCP 設定で構成する必要があります。
macOSの場合: '~/Library/Application Support/Claude/claude_desktop_config.json'にあるファイルを編集します。
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": [
"-y",
"a11y-mcp-server"
]
}
}
}Windowsの場合: %APPDATA%\Claude\settings\claude_mcp_settings.jsonにあるファイルを編集します。
Linux の場合: ~/.config/Claude/settings/claude_mcp_settings.jsonにあるファイルを編集します/path/to/axe-mcp-server/build/index.jsコンパイルされたサーバー ファイルへの実際のパスに置き換えます。
利用可能なツール
アクセシビリティテスト
URL のアクセシビリティ問題をテストします。
パラメータ:
url(必須): テストするウェブページのURLtags(オプション): テストするWCAGタグの配列 (例: ["wcag2aa"])
例
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}テストHTML文字列
HTML 文字列のアクセシビリティ問題をテストします。パラメータ:
html (必須): テストするHTMLコンテンツ
tags (オプション): テストするWCAGタグの配列 (例: ["wcag2aa"])
例
{
"html": "<div><img src='image.jpg'></div>",
"tags": ["wcag2aa"]
}ルールを取得する
オプションのフィルタリングを使用して、利用可能なアクセシビリティ ルールに関する情報を取得します。
色のコントラストをチェックする
前景色と背景色の組み合わせが WCAG コントラスト要件を満たしているかどうかを確認します。
パラメータ:
foreground（必須）: 16進形式の前景色（例："#000000"）background（必須）: 16進形式の背景色（例："#FFFFFF"）fontSize(オプション): ピクセル単位のフォントサイズ (デフォルト: 16)isBold(オプション): テキストが太字かどうか (デフォルト: false)
例
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}色のコントラストをチェックする
HTML で ARIA 属性が正しく使用されているかどうかを確認します。
パラメータ:
html(必須): ARIA 属性の使用をテストする HTML コンテンツ
例
{
"html": "<div role='button' aria-pressed='false'>Click me</div>"
}チェック方向ロック
コンテンツが特定の方向を強制するかどうかを確認します。
パラメータ:
html(必須): 方向ロックの問題をテストするための HTML コンテンツ
例
{
"html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}応答フォーマット
サーバーは、アクセシビリティ テストの結果を構造化された JSON 形式で返します。
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
"target": ["div"],
"failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
}
]
}
],
"passes": 1,
"incomplete": 0,
"inapplicable": 2,
"timestamp": "2025-04-25T16:45:33.655Z",
"url": "about:blank",
"testEngine": {
"name": "axe-core",
"version": "4.10.3"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
"windowWidth": 800,
"windowHeight": 600,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}依存関係
@モデルコンテキストプロトコル/sdk
操り人形師
@axe-core/操り人形師
斧の芯