mcpField
A
accessibility-diff

accessibility-diff

github.com/accesslintテスト・品質114968 回インストール9 週間前に更新
リポジトリ

accessibility-diff について

accessibility-diffは、バージョン間のアクセシビリティ検査結果を比較する開発者向けスキルです。新規・解消・既存の指摘を場所と根拠とともに報告し、コードは編集しません。

主な機能

  1. 01バージョン間の検査結果を比較
  2. 02新規・解消・既存の指摘を報告
  3. 03指摘箇所と根拠を提示
  4. 04作業中の変更またはブランチを比較

活用シーン

  1. 01未コミット変更による問題を確認
  2. 02ブランチとデフォルトブランチを比較
  3. 03新しい指摘の場所を特定して修正に備える

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/accesslint/skills --skill accessibility-diff

インストール後、Claude Code で/accessibility-diffを入力して読み込まれたか確認します。

詳細

デフォルトブランチ：!git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main

変更点のみを報告してください。場所を特定し、修正はしないでください。

共有の根拠提示および誠実性に関する規約：../shared/methodology.md。

$ARGUMENTS を解析します。--branch <name> が指定されている場合はこれを取り除き、ブランチモードを使用します（値がない場合は上記のデフォルトブランチを使用）。残りの部分が対象です。URL、設定対象名、または accesslint.config.json のデフォルト対象を使う場合は空にします。空で、設定ファイルもない場合は URL を尋ねてください。

1. 監査

PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')

スタッシュモード（デフォルト。未コミットの変更が対象）。最初にユーザーへ次のように伝えます："差分モードで実行します。変更をスタッシュしてベースラインを取得し、その後復元します。作業ツリーは完全に復元されます。" git stash push が失敗した場合は警告して終了します。

git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json

ブランチモード（--branch <name>）。最初にユーザーへ次のように伝えます："<name> との差分を確認します。ベースラインを取得するため、そのブランチに切り替えてから復元します。作業ツリーは完全に復元されます。" ブランチの切り替えで再ビルドは行われますが、ブラウザーは再読み込みされないため、CLI は実行のたびに新しいタブを開き、現在のビルドを読み取ります。再ビルドが完了するまで監査を待機させるには --wait-for "<selector>" を使用してください。指定しない場合、ビルドに時間がかかると古いベースラインになる可能性があることを警告します。

git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
git checkout <branch>
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git checkout - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]

両方の実行に --selector と --include-aaa を渡します。

2. レポート

Accessibility diff — http://localhost:3000/ vs main (94 rules, live DOM)
2 new · 1 fixed · 4 pre-existing hidden

New — Critical
- color-contrast — 2.1:1 (needs 4.5:1), #bbb on #fff
    where: main > p.subtitle   fix: darken to #767676
Fixed
- img-alt — <img src="old.jpg"> (no longer present)

新たに見つかった違反ごとに、場所（セレクターをそのまま記載し、source がある場合は file:line (symbol) も記載。捏造しない）、根拠、修正方法（機械的な変更、または NEEDS HUMAN）を示します。

編集はしないでください。修正する場合は、機械的に対応できるものを適用し、accesslint:accessibility-diff を再実行して検証してください。大量の作業は accesslint:accessibility-fix に引き継いでください。

3. 後処理

npx -y @accesslint/chrome@latest stop --all  # skip if ensure reported "managed":false

注意事項

  • ポートは ensure が決定します。9222 をハードコードしないでください。
  • CLI の終了コード 2 は、不正な URL または対象、あるいはページが読み込まれなかったことを示します。開発サーバーを確認してください。
  • 対象名が両方の実行で同じものに解決されるのは、スタッシュまたはチェックアウトの間に accesslint.config.json が変更されていない場合のみです。変更に設定ファイルが含まれる場合は、明示的な URL を渡してください。
  • スタッシュモード：ほとんどの HMR ケースでは sleep 2 で対応できます。ベースラインが現在の状態と同じに見える場合は、--wait-for "<selector>" を追加してください。
  • ブランチモード：HMR は行われません。CLI は実行のたびに新しいタブを開き、--wait-for が再ビルド完了の確認条件になります。
  • 実行間で DOM が大きく変わるとセレクターがずれるため、全体像を把握するには accesslint:accessibility-scan を再実行してください。

コメント

Markdown 対応