mcpField
L

Lazynext Accessibility Checker

リモート
checker.lazynext.com開発ツール04 日前に更新
リポジトリ公式サイト

Lazynext Accessibility Checker について

Lazynext Accessibility Checkerは、レンダリングしたページやHTMLをスキャンし、WCAGのアクセシビリティ上の問題を検出して、重大度に応じたスコアと共有可能なレポートを作成します。API、MCPツール、SDK、CIスキャンを通じて、開発者やサイト運営チームが利用できます。

主な機能

  1. 01レンダリング済みURLとHTMLのスキャン
  2. 02重大度に応じたスコア算出
  3. 03キーボードフォーカスとコントラストの検査
  4. 04サイトクロールと日次モニタリング
  5. 05共有可能なレポートとエクスポート
  6. 06SDK、CLI、CIゲート

活用シーン

  1. 01リリース前のページ検査
  2. 02サイト全体のアクセシビリティ確認
  3. 03スコアしきい値によるCIビルドの制御
  4. 04レポートリンクでの問題共有

MCP 対応

MCPエンドポイントは`scan_url`、`scan_html`、`get_report`、`list_rules`ツールを提供します。MCPスキャンは`/scan` APIと同じクォータを使い、同様にレポートを保存します。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://api.lazynext.com/mcp
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

ツール

4
パラメーター型必須説明
urlstringはいスキャンする http(s) URL
sitebooleanいいえ同一オリジンのページをクロール(無料版は 3 件/Pro は 10 件)
licensestringいいえPro ライセンスのメールアドレス(任意)
viewportenumいいえレンダリング設定 — モバイル 390×844 の携帯端末(デフォルト)。デスクトップではモバイル対応前のベースラインレンダリングを維持mobile | desktop

詳細

アクセシビリティチェッカー

実際の WCAG 2.1 アクセシビリティ監査です。URL を貼り付けると、実際の Chromium でページをレンダリングし、Tab キーを押してキーボードフォーカスを追跡し、計算済みスタイルから 色のコントラストを算出して、チケットとして登録できるルールの引用付きスコアレポートを返します。

ライブ版: https://checker.lazynext.com/ API: https://accessibility-checker.dry-hall-6a50.workers.dev

curl -X POST https://accessibility-checker.dry-hall-6a50.workers.dev/scan \
  -H 'content-type: application/json' \
  -d '{"url": "https://yoursite.com", "license": "[email protected]", "email_report": true}'
# → {"score": 70, "score_model": "weighted-v1", "issues": [{"rule": "wcag-1.3.1", ...}],
#    "rendered": true, "benchmark": {"pct": 61, "sites": 128},
#    "report": ".../report/<id>"}

スコアは重大度に応じて重み付けされます。確認済みの WCAG レベル A の失敗は全点が加算され、AA/AAA の検出結果は段階的に軽く、警告クラスのヒューリスティックは半分、同じルールの繰り返し発生は限界コストが半分になります。つまり、軽微な指摘が多いページより、少数の重大な障害があるページのほうが低いスコアになります。

エンドポイント:POST /scan(html または url。{"url": ..., "site": true} は 同一オリジンのページをクロールします(無料プランは 3 ページ、Pro は 10 ページ)。ページごとのスコアを返します。実際のサイトのスキャンでは benchmark も返されます。これは、このツールでスキャンしたサイトの集団内でのスコア順位です。スキャン済みサイトが 10 件以上になると表示されます)、 GET /checkout(トライアルから有料プランへの移行)、 POST /cancel(購入時のメールアドレスによるセルフサービスでの解約)、 POST /lead(メールアドレスの取得)、GET /report/:id(共有可能なレポート。 ?level=A|AA|AAA|BP、?rule=<id>、?by=page で表示を切り替えられます。CSV/JSON/PDF エクスポートにも反映されます)、 GET /badge/:id.svg(レポート用の埋め込み可能なスコアバッジ)、 GET /rules(対応状況一覧。74 件の WCAG 基準と 1 件のベストプラクティスチェックについて、出力されるすべてのチェックの名前、レベル、WCAG バージョン、検出方法を掲載します。 Accept: text/html で閲覧可能なカタログを返し、デフォルトでは JSON を返します)、 GET /openapi.json(REST API 全体の OpenAPI 3.1 コントラクト)、 POST /monitor / GET /monitor?license= / DELETE /monitor(Pro の日次モニタリング。プラットフォームが登録済みの各 URL を再スキャンし、ページのスコアが 10 点以上低下すると Brevo アラートをメールで送信します)、GET /health。

エージェント向けインターフェース

  • MCP — POST /mcp、JSON-RPC 2.0(initialize、tools/list、 tools/call。GET は 405 を返し、SSE はありません)。ツール:scan_url、scan_html、 get_report、list_rules。MCP クライアントに追加します: {"mcpServers": {"a11y": {"url": "https://checker.lazynext.com/mcp"}}}
  • A2A — エージェントカードは GET /.well-known/agent.json にあり、POST /a2a は message/send(URL または HTML を含むテキストパートを送信)、 tasks/send(エイリアス)、tasks/get(タスク ID は永続化された レポート ID)を処理します。スキャンはレポートのアーティファクトを含む完了済みタスクとして返されます。
  • ウィジェット — <script src="https://checker.lazynext.com/widget.js" data-target="#el"></script> を使うと、Shadow DOM のスキャンボックスを任意の場所に設置できます。 Pro の場合は、任意で data-license="[email protected]" を指定します。
  • MCP/A2A 経由のスキャンは /scan の無料枠(1 日あたり IP ごとに URL スキャン 3 回)を共有し、同じ 30 日間のレポートを保存します。

SDK と CLI

import { AccessibilityChecker } from './sdk/js/index.js';
const a11y = new AccessibilityChecker({ license: '[email protected]' }); // license optional
const { score, issues, report } = await a11y.scan({ url: 'https://example.com' });
await a11y.site('https://example.com');   // same-origin crawl
await a11y.report(id);                     // stored report object (.json export)
await a11y.reportCsv(id);                  // CSV export
await a11y.rules();                        // full coverage manifest
c := checker.New("[email protected]")            // license optional
res, err := c.Scan(checker.ScanOptions{URL: "https://example.com"})
rep, _ := c.Report(id)                     // stored report object (.json export)
rules, _ := c.Rules()
from lazynext_a11y import AccessibilityChecker   # sdk/python, stdlib only
c = AccessibilityChecker(license="[email protected]")  # license optional
res = c.scan(url="https://example.com")
lazynext-a11y scan https://example.com --site    # bin/cli.js in sdk/js
lazynext-a11y rules --pretty
lazynext-a11y report <id>                        # CSV to stdout (--json for the object)
lazynext-a11y monitor add <url> --license [email protected]
  • sdk/js — index.js と index.d.ts、依存関係ゼロ。Node 18 以降とブラウザーに対応。 bin: エントリーは lazynext-a11y(インストール前は node sdk/js/bin/cli.js)
  • sdk/go — checker パッケージ。標準ライブラリのみ(go build が正常に完了)
  • sdk/python — lazynext_a11y モジュール。標準ライブラリのみ(pip install sdk/python)
  • scripts/ci-scan.mjs — CI ゲート:node scripts/ci-scan.mjs --url <u> --fail-under 80

チェック項目

  • レンダリング後の DOM(Cloudflare Browser Rendering 経由):ランドマーク、見出し、 画像の代替テキスト、フォームラベルの関連付け(ラベルで囲む形式を含む)、曖昧な リンクテキスト、ビューポートのズーム制限
  • 計算済みスタイルのコントラスト(WCAG 1.4.3 + 1.4.6):描画されたスタイルに対する実際の輝度計算 — 通常のテキストは 4.5:1、大きなテキストは 3:1、さらに強化基準の 7:1 にも対応
  • 追加ルール(src/rules/additional.js):見出しの内容(2.4.6)、 名前に含まれるラベル(2.5.3)、ビューポートの最大スケール(1.4.4)、テキスト間隔の上書き (1.4.10)、部分の言語(3.1.2)、ステータスメッセージ(4.1.3)、フォーカスの可視性 (2.4.7 — インラインおよびスタイルシートによるアウトライン抑制)、時間制限のある 更新(2.2.1)、自動再生/動くコンテンツ(1.4.2/2.2.2)、オートコンプリート トークン(1.3.5)、フォーカス時のコンテキスト変更(3.2.1)、変更時の自動送信 (3.2.2)、accesskey/単一文字のショートカット(2.1.4)、テキストの画像(1.4.5)、 複数のナビゲーション手段(2.4.5)、ハイフネーションなしの両端揃えテキスト (1.4.8 — warn クラスのヒューリスティック)、アイコンのみのコントロールの アクセシブルな名前の網羅性(4.1.2)、動作による起動(2.5.4)、画面の向きの固定 (1.3.4)、Escape キーで閉じられないホバー/フォーカスコンテンツ(1.4.13 — warn クラス)、および down イベントによるナビゲーション(2.5.2)。さらに、以前はブラウザーが必要だった項目も静的に網羅: 重複 ID(4.1.1)、参照先のない label/aria/label-for 参照 + iframe のタイトル + 無効な role/ aria 属性名 + aria-hidden のフォーカス可能要素 + 入れ子になったインタラクティブ要素(4.1.2)、リスト/dl の 余分な項目 + fieldset/optgroup/table の構造 + 非推奨のプレゼンテーション用マークアップ(1.3.1)、 代替手段のない画像入力/area/canvas/svg(1.1.1)、キャプショントラックのないメディア(1.2.1)、 autofocus(3.2.1)、role/tabindex/スクロール可能要素のキーボード操作上の不足(2.1.1)、 javascript:/無効/参照先のないフラグメントリンク(2.4.4)、点滅するコンテンツ (2.3.1)、感覚のみに依存する指示(1.3.3 — warn クラス)、関連付けられていない ラベル(3.3.2)、長いコンテンツにセクション見出しがない場合(2.4.10 — AAA の参考項目)、名前のない重複ランドマーク(1.3.1)
  • レンダリング後のレイアウトチェック:ターゲットサイズ 24×24px(2.5.8 — インラインリンク と UA コントロールは適用除外)、作成者のオーバーレイによってフォーカスが隠されないこと(2.4.11)、 可視フォーカスインジケーター(2.4.13)、コントロール境界の非テキストコントラスト(1.4.11 — 隣接する背景との比率 3:1)、テキスト間隔の上書きによるクリッピング(1.4.12 — WCAG 指標の注入、 差分のみ)、および色の使用(1.4.1 — 本文に限定:下線のない本文中リンクは、周囲のテキストとのコントラスト比が 3:1 以上である必要があります。 ナビゲーション/構造上のリンクは、基準自体の適用範囲外です)
  • キーボード:ブラウザーで実際に Tab キーを押して確認 — キーボードで操作できない ページ(2.1.1)、フォーカストラップ(2.1.2)、フォーカス順序の欠落と循環(2.4.3)、 ダイアログの Escape キー処理。静的チェックでは、貼り付けた HTML 内の Tab キーを無効化する ハンドラーや閉じられないダイアログも検出します
  • Shadow DOM:レンダリング後のスキャンでは、オープンシャドウルートを <template shadowrootmode> マーカーにシリアライズするため、マークアップルールでカプセル化された コンテンツも確認できます。フォーカスの網羅調査と Tab トレースでもオープンルートをたどります。設計上、 クローズドルートをたどることはできません — これは正直な制約です。要素ルールでは <script> の本文を無視するため、マークアップ形式の JS 文字列が実際の要素として二重にカウントされることはありません
  • ページ間(src/rules/crosspage.js、サイトスキャン):一貫した ナビゲーション(3.2.3)、一貫した識別(3.2.4)、一貫したヘルプ手段(3.2.6)
  • WCAG 2.2 + Section 508:src/rules/wcag22.js は WCAG 2.2 世代のチェック (アクセシブルな認証 3.3.8、冗長な入力 3.3.7、ドラッグ 2.5.7、…)を追加します。 src/rules/section508.js は検出結果を 36 CFR 1194 の条項に対応付けます
  • DOM の情報:iframe のタイトル、重複 ID、aria-hidden のフォーカス可能要素、 autofocus、noopener のない target=_blank、メディアのキャプション、テーブルのヘッダー、 スキップリンク

料金

  • 無料:IP あたり 1 日 3 回のレンダリングスキャン
  • Pro $9/mo:スキャン無制限 + メールでのレポート — /checkout(Dodo Payments)
    • 14 日間の無料トライアル:開始時にカード情報を取得し、14 日目に自動で有料プランに移行します。 POST /cancel またはサイトの解約リンクから、いつでも解約できます
    • トライアル終了のリマインダーを 11 日目にメールで送信します

アーキテクチャ

  • src/scanner.js — 依存関係のない WCAG エンジン(API が実行するものと同じモジュール)
  • src/rules/ — additional(ページごとの静的チェック)、crosspage(サイトスキャンチェック)、focuscycle、wcag22、section508。すべてスキャンパイプラインに組み込まれています
  • src/crawl.js + src/monitor.js — 同一オリジンのサイトクロール(無料は3ページ/Proは10ページ)と、スケジュールに従って再スキャンしアラートを送信するモニター
  • worker.js — Cloudflare Worker:スキャン API、レート制限、ライセンスチェック、共有可能なレポート、リード獲得、トライアルのチェックアウト、セルフサービスのキャンセル、メール送信される Pro レポート、MCP/A2A/ウィジェット/PWA の各機能
  • src/openapi.js — /openapi.json で提供される OpenAPI 3.1 コントラクト。src/rules_catalog.js — HTML カバレッジカタログ /rules のネゴシエーション先
  • index.html — Pages サイト(スキャン UI、サイトスキャン、モニター、トライアル CTA、キャンセル、メールレポートのオプトイン、402 リードファネル、localStorage のスキャン履歴)
  • action.yml + scripts/ci-scan.mjs — CI のゲートとして使う GitHub Action

GitHub Action

アクセシビリティスコアに基づいてデプロイを制御します:

- uses: Lazynext-AI/accessibility-checker@main
  with:
    url: https://staging.example.com
    fail-under: 80            # fail the build below this score
    # license: ${{ secrets.A11Y_LICENSE }}   # Pro: higher limits
    # site: true                             # crawl same-origin pages
    # fail-on: wcag-1.1.1,wcag-2.1.2         # rules that always fail

score と issues を出力し、検出結果はレポートへのリンクとともにステップのサマリーに表示されます。単独で実行する場合:node scripts/ci-scan.mjs --url <u> --fail-under 80。

  • scripts/ — sync-page.mjs は埋め込み UI バンドルを再生成し、deploy.mjs はすべてのバインディングを指定してデプロイします(wrangler deploy は使用しません)。ci-scan.mjs は CI/単独実行用の CLI です
  • test/ — node --test テストスイート(277件のテスト)。CI でプッシュのたびに実行されます

Lazynext エージェントが自律的に構築・運用しています。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。