Accessibilityai

AccessibilityAI — GroundLogic AI 提供

AI ビジョン分析と DOM スキャンを使用して、WCAG 2.1 のアクセシビリティを自律的に監査します。スキャン、修正、再検証を行い、VPAT 2.5 EN 301 549 レポートを生成します。

⚠️ ベータ版 — AccessibilityAI は開発初期段階のプロトタイプです。自動化ツールで検出できるアクセシビリティの問題は、約 40～60％です。正式なコンプライアンス目的で VPAT レポートを提出する前に、認定スペシャリストによる手動レビューを推奨します。まだ不完全な点がありますので、以下のフォームからフィードバックの送信やバグの報告をお願いします。

[デモ GIF をここに追加]

---

フィードバック

AccessibilityAI は現在も積極的に開発中です。不具合が発生した場合や、機能のご要望がある場合は、ぜひお知らせください。

→ フィードバックフォームを開く

バグの報告には、GitHub Issue を作成することもできます。

---

機能

AccessibilityAI は、次の機能を備えたオープンソースの MCP サーバーです。

1. axe-core（DOM）と Claude Vision（AI によるスクリーンショット分析）を使用して URL をスキャンします
2. 違反ごとに、的確でフレームワークに応じたコード修正を生成します
3. 修正を適用した後に再スキャンして再検証し、解決された内容を正確に表示します
4. すべての条項を網羅した VPAT 2.5 EN 301 549 アクセシビリティ適合レポート（PDF + JSON）を生成します

Streamable HTTP 経由で MCP サーバーとして動作し、Claude Desktop、Claude Code、Cursor、およびあらゆる MCP クライアントと互換性があります。

---

クイックスタート

これは pnpm モノレポです。MCP サーバーは artifacts/api-server/ にあります。

# 1. Clone and install
git clone https://github.com/groundlogic-ai-source/accessibility-ai
cd accessibility-ai
pnpm install

# 2. Install the Playwright browser (required for scanning)
npx playwright install chromium

# 3. Set environment variables
export DATABASE_URL="postgresql://user:pass@localhost:5432/accessibilityai"
# Or copy from a .env file — pnpm-workspace reads it automatically

# 4. Push the database schema
pnpm --filter @workspace/db run push

# 5. Start the MCP server
pnpm --filter @workspace/api-server run dev
# MCP endpoint:   http://localhost:8080/mcp
# Health check:   http://localhost:8080/api/healthz
# REST scan:      http://localhost:8080/api/scan  (no MCP client needed)

---

独自のキーを使用する

AccessibilityAI は、**Bring Your Own Key（BYOK）**モデルを採用しています。各ツール呼び出しでご自身の Anthropic API キーを指定してください。キーが保存またはログに記録されることはなく、単一のリクエストの処理中にのみ使用されます。

キーが保持されることはありません。 詳しくはPRIVACY.mdをご覧ください。

Anthropic API キーは console.anthropic.com で取得できます。

---

MCP ツール

scan_accessibility

DOM 分析とビジュアル AI を使用して、WCAG 2.1 のアクセシビリティ違反がないか URL をスキャンします。

入力：

{
  "url": "https://example.com",
  "anthropic_api_key": "sk-ant-...",
  "scan_depth": "single_page",
  "max_pages": 1
}

出力：

{
  "scan_id": "uuid",
  "url": "https://example.com",
  "total_violations": 12,
  "violations_by_severity": { "critical": 2, "serious": 4, "moderate": 5, "minor": 1 },
  "estimated_fix_time": "2-4 hours",
  "violations": [...]
}

---

generate_fixes

スキャン結果を受け取り、違反ごとに具体的なコード修正を生成します。Claude Code または Replit Agent に貼り付けて使用できるパッチを返します。

入力：

{
  "scan_id": "uuid-from-scan",
  "framework": "react",
  "anthropic_api_key": "sk-ant-..."
}

出力：

{
  "scan_id": "uuid",
  "fixes": [
    {
      "wcag_criterion": "1.1.1",
      "issue": "Image missing alt text",
      "before": "<img src=\"hero.jpg\">",
      "after": "<img src=\"hero.jpg\" alt=\"Hero banner showing product dashboard\">",
      "explanation": "...",
      "caveats": "..."
    }
  ],
  "copy_paste_summary": "Please fix the following accessibility violations in my codebase:\n..."
}

copy_paste_summary フィールドは、Claude Code または Replit Agent にそのまま貼り付けられる形式です。

---

re_verify

修正を適用した後に URL を再スキャンし、元のスキャン結果と比較します。

入力：

{
  "scan_id": "original-scan-uuid",
  "anthropic_api_key": "sk-ant-..."
}

出力：

{
  "original_violations": 12,
  "current_violations": 3,
  "resolved": [...],
  "persisting": [...],
  "new_violations": [],
  "improvement_percentage": 75,
  "summary": "9 of 12 violations resolved (75% improvement). 3 violation(s) remain."
}

---

generate_vpat

VPAT 2.5 EN 301 549 アクセシビリティ適合レポートを生成します。すべての条項を網羅した PDF（base64）と構造化 JSON を返します。

入力：

{
  "scan_id": "uuid-from-scan",
  "product_name": "My SaaS App",
  "product_version": "2.1.0",
  "company_name": "Acme Corp",
  "contact_email": "[email protected]",
  "anthropic_api_key": "sk-ant-..."
}

出力：

• vpat_json — 構造化された VPAT レポート全体（EN 301 549 の全条項）
• pdf_base64 — base64 エンコードされた PDF。デコードして .pdf として保存します
• overall_conformance_percentage — WCAG 2.1 レベル A および AA の達成基準への適合率（％）

---

プロンプトの例

AccessibilityAI に接続した Claude Desktop、Claude Code、または任意の MCP クライアントで、次のプロンプトを使用できます。

1. サイトをスキャンして違反の概要を取得する：

Scan https://example.com for WCAG 2.1 accessibility violations using my Anthropic key sk-ant-... and give me a prioritized summary of what needs to be fixed.

2. 特定のフレームワーク向けにコード修正を生成する：

Use the scan_id from the accessibility scan you just ran to generate React code fixes for all the violations. Format them so I can paste them directly into my codebase.

3. 修正を再検証して VPAT レポートを作成する：

Re-verify https://example.com using the original scan_id to confirm my fixes resolved the issues, then generate a complete VPAT 2.5 compliance report for "Acme Corp" and return the PDF.

---

本番環境での使用

AccessibilityAI は、調達時に VPAT 文書が必要となる医療および政府機関の分野で、アクセシビリティコンプライアンスのワークフローを支えています。組織は、手動監査の前にベースラインとなる適合レポートを生成するためにこれを利用し、監査サイクルごとに 4～8 時間を節約しています。

---

制限事項

• 自動ツールで検出できるアクセシビリティの問題は、約 40～60% です。完全なコンプライアンス認証には、認定アクセシビリティ専門家による手動レビューを推奨します。
• このツールで生成された VPAT レポートは、規制当局への提出前にレビューしてください。
• サイト全体のスキャンは 10 ページまでに制限されています。深い階層にあるページには到達できない場合があります。
• Web 以外の EN 301 549 条項（ハードウェア、音声、クローズドソフトウェア）は「未評価」と表示されます。これらは手動での評価が必要です。
• スキャン結果は 1 時間保持されます。結果の有効期限が切れた場合は、scan_accessibility を再実行してください。

---

MCP クライアントの設定

Claude Desktop

claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "accessibility-ai": {
      "url": "https://your-deployed-instance.com/mcp",
      "transport": "streamable-http"
    }
  }
}

Claude Code / CLI

claude mcp add --transport http accessibility-ai https://your-deployed-instance.com/mcp

---

コントリビューション

コントリビューションを歓迎します。以下の点に従ってください。

1. リポジトリをフォークし、フィーチャーブランチを作成します
2. 既存のコードスタイルに従います（TypeScript の strict モードを使用し、any は使わないでください）
3. 変更した動作に関するテストを追加または更新します
4. 明確な説明を添えてプルリクエストを作成します

バグ報告や機能リクエストは、GitHub Issue を作成するか、フィードバックフォームをご利用ください。

---

ライセンス

MIT — 詳細は LICENSE をご覧ください。

GroundLogic AI — [email protected]