A11y

🚀 A11y MCP サーバー

axe-core を使用してウェブページのアクセシビリティを審査する Model Context Protocol (MCP) サーバーです。お気に入りの AI アシスタント（Cline/Cursor/GH Copilot）と組み合わせて使用し、アクセシビリティの問題を修正することができます！

✨ 主な機能

• 任意のウェブページに対して詳細なアクセシビリティ審査を実行します。
• アクセシビリティの問題の概要を取得します。
• 特定の WCAG 標準に基づいて審査結果をフィルタリングします。
• デバッグを容易にするために、結果に HTML フラグメントを含めます。

📦 インストール

# グローバルインストール
npm install -g a11y-mcp

# または npx を直接使用
npx a11y-mcp

📚 ドキュメント

MCP 設定

この MCP サーバーを Cline と一緒に使用するには、MCP 設定の構成ファイルに追加する必要があります。

mcpServers オブジェクトに以下を追加します。

{
  "mcpServers": {
    "a11y": {
      "command": "npx",
      "args": ["a11y-mcp"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

利用可能なツール

audit_webpage

ウェブページに対して詳細なアクセシビリティ審査を実行します。

パラメータ:

• url（必須）: 審査するウェブページの URL
• includeHtml（オプション）: 結果に HTML フラグメントを含めるかどうか（デフォルト: false）
• tags（オプション）: チェックする特定のアクセシビリティタグの配列（例: wcag2a、wcag2aa、wcag21a、best-practice）

例:

a11y MCP サーバーを使用して example.com のアクセシビリティ問題を審査する

get_summary

ウェブページのアクセシビリティ問題の概要を取得します。

パラメータ:

• url（必須）: 審査するウェブページの URL

例:

example.com のアクセシビリティ問題の概要を取得する

💻 使用例

設定が完了したら、Claude に MCP サーバーを使用してアクセシビリティ審査を実行するよう指示できます。

1. "example.com にアクセシビリティ問題があるかチェックしてくれますか？"
2. "私のウェブサイト https://mywebsite.com を WCAG 2.1 AA 標準に準拠するように審査してください"
3. "https://example.com のアクセシビリティ問題の概要を教えてください"
4. "私のローカル開発サーバー http://localhost:3000 に重大なアクセシビリティ問題があるかチェックしてください"

🔧 開発

開発用にサーバーをローカルで実行するには、以下を実行します。

npm start

🔖 リリース

このプロジェクトには、バージョン管理と npm への公開を支援するリリーススクリプトが含まれています。スクリプトはバージョンの増分、テストの実行、Git タグの作成、および npm への公開を処理します。

新しいバージョンを公開するには、以下のコマンドを使用します。

# スクリプトが実行可能であることを確認
chmod +x release.sh

# パッチバージョンを公開（デフォルト）
./release.sh

# マイナーバージョンを公開
./release.sh --minor

# メジャーバージョンを公開
./release.sh --major

# 特定のバージョンを公開
./release.sh --version=1.2.3

# Git 操作をスキップ
./release.sh --skip-git

# ドライラン（何も変更しない）
./release.sh --dry-run

# 未コミットの変更がある場合でも強制的に公開
./release.sh --force

詳細情報を取得するには、以下を実行します。

./release.sh --help

📄 ライセンス

MPL 2.0

🙏 謝辞

このプロジェクトは、優れた作品 axe-core をベースに構築されています。