Web Accessibility-Testing MCP Server (A11y MCP)

Web アクセシビリティテスト MCP サーバー（A11y MCP）

https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b

A11y MCP は、LLM がウェブアクセシビリティテスト API を利用できるようにする MCP（Model Context Protocol） サーバーです。

このサーバーは、Deque Axe-core API と Puppeteer を使用して、LLM がウェブコンテンツの WCAG 準拠状況を分析し、アクセシビリティの問題を特定できるようにします。

注記： これは Deque Labs の公式 MCP サーバーではありません。

機能

• ウェブページのテスト：カスタマイズ可能なビューポート寸法を指定して、公開 URL のアクセシビリティの問題をテストします
• HTML スニペットのテスト：生の HTML 文字列のアクセシビリティの問題をテストします
• WCAG 準拠テスト：さまざまな WCAG 規格（2.0、2.1、2.2）に照らしてコンテンツを確認します
• テストのカスタマイズ：テスト対象とするアクセシビリティのタグや規格を指定します
• ルールの確認：利用可能なアクセシビリティルールの情報を取得します
• カラーコントラスト分析：色の組み合わせが WCAG に準拠しているか確認します
• ARIA の検証：ARIA 属性が適切に使用されているかテストします
• 画面向きのロック検出：特定の画面向きを強制するコンテンツを特定します

インストール

前提条件

• Node.js 18 以降
• MCP 対応クライアント（Claude Desktop、Claude Code、VS Code、Cursor など）

Claude Desktop

MCP 設定ファイルを編集します。

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows： %APPDATA%\Claude\claude_desktop_config.json
• Linux： ~/.config/Claude/claude_desktop_config.json

サーバーを mcpServers オブジェクトに追加します。

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

Claude Code（CLI）

claude mcp add a11y-accessibility -- npx -y a11y-mcp-server

これにより、現在のプロジェクトにサーバーが登録されます。すべてのプロジェクトで利用できるようにするには、次のようにします。

claude mcp add --scope user a11y-accessibility -- npx -y a11y-mcp-server

サーバーが登録されていることを確認します。

claude mcp list

注記： MCP ツールは、Claude Code のセッションを再起動すると利用できるようになります。

VS Code（Copilot）

VS Code の settings.json または .vscode/settings.json に追加します。

{
  "mcp": {
    "servers": {
      "a11y-accessibility": {
        "command": "npx",
        "args": ["-y", "a11y-mcp-server"]
      }
    }
  }
}

Cursor

Cursor の MCP 設定（.cursor/mcp.json）に追加します。

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

Windsurf

Windsurf の MCP 設定（~/.codeium/windsurf/mcp_config.json）に追加します。

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

利用可能なツール

test_accessibility

URL のアクセシビリティの問題をテストします。

パラメーター：

パラメーター	必須	説明
url	はい	テストするウェブページの URL
tags	いいえ	テスト対象とする WCAG タグの配列（例：["wcag2aa"]）
width	いいえ	ビューポートの幅（ピクセル単位、デフォルト：1280）
height	いいえ	ビューポートの高さ（ピクセル単位、デフォルト：800）

例 — デスクトップのビューポート（デフォルト）：

{
  "url": "https://example.com",
  "tags": ["wcag2aa"]
}

例 — モバイルのビューポート（iPhone 12/13）：

{
  "url": "https://example.com",
  "tags": ["wcag2aa"],
  "width": 390,
  "height": 844
}

test_html_string

HTML 文字列にアクセシビリティ上の問題がないかテストします。

パラメーター：

パラメーター	必須	説明
html	はい	テストする HTML コンテンツ
tags	いいえ	テスト対象の WCAG タグの配列（例：["wcag2aa"]）
width	いいえ	ビューポートの幅（ピクセル単位。デフォルト：1280）
height	いいえ	ビューポートの高さ（ピクセル単位。デフォルト：800）

例 — デフォルトのビューポート：

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"]
}

例 — モバイルのビューポート：

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"],
  "width": 375,
  "height": 812
}

get_rules

利用可能なアクセシビリティルールの情報を、任意のフィルターを指定して取得します。各オブジェクトに ruleId、description、help、helpUrl、tags が含まれるルールオブジェクトの配列を返します。

パラメーター：

パラメーター	必須	説明
tags	いいえ	タグでルールを絞り込みます（例：["wcag2a", "wcag2aa", "best-practice"]）

例 — WCAG 2.1 AA のルールで絞り込む：

{
  "tags": ["wcag21aa"]
}

例 — すべてのルールを取得する（フィルターなし）：

{}

check_color_contrast

前景色と背景色の組み合わせが WCAG のコントラスト要件を満たしているか確認します。

パラメーター：

パラメーター	必須	説明
foreground	はい	前景色（例："#000000"、"rgb(0,0,0)"）
background	はい	背景色（例："#FFFFFF"、"rgb(255,255,255)"）
fontSize	いいえ	フォントサイズ（ピクセル単位。デフォルト：16）
isBold	いいえ	テキストが太字かどうか（デフォルト：false）

例：

{
  "foreground": "#777777",
  "background": "#EEEEEE",
  "fontSize": 16,
  "isBold": false
}

check_aria_attributes

HTML で ARIA 属性が正しく使用されているか確認します。

パラメーター：

パラメーター	必須	説明
html	はい	ARIA 属性の使用状況をテストする HTML コンテンツ

例：

{
  "html": "<div role='button' aria-pressed='false'>Click me</div>"
}

check_orientation_lock

コンテンツによって特定の画面の向きが強制されていないか確認します。

パラメーター：

パラメーター	必須	説明
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"
  }
}

WCAG タグのリファレンス

tags パラメーターで使用できる一般的なタグ：

タグ	説明
wcag2a	WCAG 2.0 レベル A
wcag2aa	WCAG 2.0 レベル AA
wcag2aaa	WCAG 2.0 レベル AAA
wcag21a	WCAG 2.1 レベル A
wcag21aa	WCAG 2.1 レベル AA
wcag22aa	WCAG 2.2 レベル AA
best-practice	ベストプラクティス（WCAG の厳密な要件ではありません）

依存関係

• @modelcontextprotocol/sdk
• puppeteer
• @axe-core/puppeteer
• axe-core

ライセンス

MIT