a11y

mcp-a11y-tools

Model Context Protocol（MCP）経由で提供される、AI エージェント向けのウェブアクセシビリティ分析ツールです。

ツール

check_alt_text

HTML 内の画像を分析し、alt テキストの欠落、空欄、品質の低さを検出します。

• alt 属性の欠落を検出します
• 装飾画像（role="presentation" を指定した alt=""）を識別します
• 品質の低い alt テキスト（例：「image」、「photo」、ファイル名）を検出します
• リンク画像、<input type="image">、<area> 要素を確認します

check_heading_hierarchy

適切な入れ子構造とコンテンツ品質を満たしているか、見出し構造を検証します。

• レベルを飛ばさずに h1-h6 の順序を確認します
• ページごとに <h1> が1つだけであることを確認します
• 空、短すぎる、または長すぎる見出しを検出します
• aria-level を指定した role="heading" をサポートします
• 見出しのアウトラインを視覚的なツリーで返します

check_color_contrast

前景色と背景色の組み合わせについて、WCAG 2.x のコントラスト比を確認します。

• WCAG の相対輝度の計算式に基づき、正確なコントラスト比を計算します
• 通常のテキストと大きなテキストについて、AA および AAA への適合状況を報告します
• 16進数（#fff、#ffffff）、rgb(r,g,b)、名前付きカラーを受け付けます

validate_aria

HTML 要素の ARIA 属性を検証します。

• 無効な ARIA ロールを検出します
• ロールごとに必須の ARIA プロパティが不足していないか確認します
• ネイティブのセマンティクスと一致する冗長な ARIA ロールを検出します
• インタラクティブでない要素の aria-label について警告します
• フォーカス可能な要素に aria-hidden="true" が指定されている場合に検出します

check_form_accessibility

フォーム要素のアクセシビリティへの適合状況を監査します。

• すべての入力に関連付けられたラベル（明示的、暗黙的、または ARIA）があることを確認します
• ラジオボタン／チェックボックスのグループに <fieldset> と <legend> があるか確認します
• プレースホルダーテキストが唯一のラベルとして使われている場合に検出します
• 個人情報のフィールドに autocomplete 属性を提案します
• ラベルの関連付けに支障をきたす重複 ID を検出します

セットアップ

npm install
npm run build

Claude Desktop での使用方法

claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "a11y-tools": {
      "command": "node",
      "args": ["D:/products/mcp-servers/mcp-a11y-tools/dist/index.js"]
    }
  }
}

ライセンス

MIT