AIでUI仕様のアクセシビリティ検証を自動化する方法

はい。AIが validate_accessibility ツールを使用して、コンポーネントの仕様をWCAG 2.2 AAの要件と比較します。修正が必要な具体的な問題箇所が詳細に提示されます。

1. 01

   仕様の読み取り

   AIクライアントが、提供された設計データやコンポーネントのプロパティを取り込みます。

   validate_accessibility
2. 02

   WCAGチェックの実行

   AIが提供されたデータをWCAG 2.2 AAのルールセットと照合します。

   validate_accessibility
3. 03

   問題箇所の特定

   色のコントラスト不足やタッチターゲットのサイズ不足など、具体的な不備を特定します。

   validate_accessibility
4. 04

   結果のレポート

   検証を通過したものと失敗したものを、構造化されたリストとして提示します。

   validate_accessibility

WCAG 2.2 Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — WCAG 2.2 capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "accessibility-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

ワンクリックでクライアントをMCPに接続できます。認証情報は弊社側で暗号化して保持されます。

• 01

  AIがデザインファイルを直接修正することはできますか？

  いいえ。AIはアクセシビリティの不備を特定するのみです。実際の修正はデザインツール上で行う必要があります。

• 02

  公開されているウェブサイトのURLをスキャンできますか？

  いいえ。このツールは、チャット内で提供された特定のコンポーネント仕様を検証するためのものです。

• 03

  仕様が不完全な場合はどうなりますか？

  AIは判断に必要なデータが不足している場合、それを「手動レビュー」が必要な項目としてフラグ立てします。

• 04

  WCAG 2.1には対応していますか？

  いいえ。本ツールはWCAG 2.2 AA基準に準拠して検証を行うよう設計されています。

• 05

  AIがデザインデータを削除することはありませんか？

  はい、ありません。AIは検証を実行するために、提供されたデータを読み取るだけです。

• Accessibility Proverについて他に質問がありますか？ Accessibility Prover Connectorの全機能を見る