Accessibilitymcp

🚀 ウェブアクセシビリティテストMCPサーバー（A11y MCP）

ウェブアクセシビリティテストMCPサーバー（A11y MCP） は、Webアプリケーションのアクセシビリティテストを行うためのツールで、Model Context Protocol (MCP) を介したインタラクションをサポートしています。このサーバーは @modelcontextprotocol/sdk をベースに構築され、puppeteer や axe-core などのライブラリを組み合わせて、包括的なアクセシビリティテスト機能を提供します。

🚀 クイックスタート

このセクションでは、ウェブアクセシビリティテストMCPサーバー（A11y MCP）の基本的な使い方を説明します。

✨ 主な機能

核心機能

• アクセシビリティテスト：axe-core を使用してウェブページの内容を分析し、WCAG 2.1 レベルAAAに準拠していない問題を検出します。
• DOM操作：Puppeteer が提供するAPIを利用して、要素の位置特定、クリック、入力などの操作を行います。
• レポート生成：詳細なアクセシビリティテスト結果を返し、違反項目、合格項目、不適用項目を含みます。

サポート機能

1. 色コントラスト検出
   • テキストと背景のコントラストがWCAG標準に準拠していることを確認します。
2. フォーム検証
   • フォーム要素がアクセシビリティ規格に準拠しているかどうかをチェックします。例えば、ラベルの関連付けや入力のヒントなどです。
3. スクリーンリーダーサポート
   • ウェブページの内容がスクリーンリーダーによって正しく解析および読み上げられることを検証します。
4. キーボードナビゲーションテスト
   • ユーザーがキーボードですべてのインタラクション操作を完了できることを保証します。

📦 インストール

依存関係

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

インストール手順

1. Node.jsパッケージマネージャー (npm) またはyarnを使用して、すべての依存関係をダウンロードします。

   npm install @modelcontextprotocol/sdk puppeteer @axe-core/puppeteer axe-core
   

2. 環境変数を設定するか、コード内でPuppeteerのブラウザ実行モード（例：headless または non-headless）を指定します。

💻 使用例

基本的な使用法

const { createMcpServer } = require('@modelcontextprotocol/sdk');
const puppeteer = require('puppeteer');
const axe = require('axe-core');

// 初始化 Puppeteer 浏览器实例
let browser;
async function initBrowser() {
  browser = await puppeteer.launch({
    headless: true,
    width: 1200,
    height: 800,
  });
}

// 创建 MCP 服务器
const server = createMcpServer({
  async getBrowser() {
    if (!browser) await initBrowser();
    return browser;
  },
});

// 示例测试用例：检测颜色对比
async function testContrast(url) {
  const page = await browser.newPage();
  await page.goto(url);
  const result = await axe.run(page);
  return result;
}

// 启动服务器并开始测试
server.start(3000);

📚 ドキュメント

レスポンスフォーマット

MCPサーバーが返すアクセシビリティテスト結果は、JSON形式です。

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "确保文本与背景之间的对比度符合 WCAG 2 AA 最低要求。",
      "help": "元素必须满足最低颜色对比度阈值。",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">低对比度文本</div>",
          "target": ["div"],
          "failureSummary": "修复以下任一问题：元素的对比度为 1.98（前景色：#aaa，背景色：#eee，字体大小：12.0pt，字体重量：正常）未达到最低要求。"
        }
      ]
    }
  ],
  "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",
    "width": 1200,
    "height": 800
  }
}

その他のリソース

• 公式ドキュメント：Model Context Protocol
• Puppeteerドキュメント：Puppeteer 公式ドキュメント
• axe-coreドキュメント：axe-core 公式ドキュメント