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 属性の適切な使用をテストする
画面の向きのロック検出: 特定の画面の向きを強制するコンテンツを識別します

インストール

このサーバーを 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 (必須): テストするウェブページのURL
tags (オプション): テストする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/操り人形師
斧の芯

A11y MCP Server

Integrations

特徴

インストール

利用可能なツール

アクセシビリティテスト

テストHTML文字列

ルールを取得する

色のコントラストをチェックする

色のコントラストをチェックする

方向ロックの確認

応答フォーマット

依存関係

Related MCP Servers

MCP Accessibility Scanner

Web Accessibility MCP Server

Cursor A11y MCP

Playwright MCP Serverofficial

Integrations

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

特徴

インストール

利用可能なツール

アクセシビリティテスト

テストHTML文字列

ルールを取得する

色のコントラストをチェックする

色のコントラストをチェックする

方向ロックの確認

応答フォーマット

依存関係

Related MCP Servers

MCP Accessibility Scanner

Web Accessibility MCP Server

Cursor A11y MCP

Playwright MCP Serverofficial

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