diff について
diff は、現在のプロジェクトとブランチまたは一時退避した状態のアクセシビリティスキャン結果を比較するスキルです。ファイルを変更せず、差分を報告して回帰確認を支援します。
主な機能
- 01保存したベースラインとのスキャン比較
- 02ブランチまたは退避状態での比較
- 03新規・解消した問題の報告
- 04セレクター、根拠、修正案の提示
- 05スキャン後の作業ツリー復元
活用シーン
- 01マージ前のアクセシビリティ回帰確認
- 02指定ブランチとの作業内容の比較
- 03新たに発生した問題の特定
- 04変更による問題解消の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ accesslint/ skills --skill diffインストール後、Claude Code で/diffを入力して読み込まれたか確認します。
詳細
デフォルトブランチ:!git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main
変更点のみを報告してください。場所を特定し、修正はしないでください。
$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:diff を再実行して検証してください。一括対応は accesslint:audit に引き継いでください。
3. 後処理
npx -y @accesslint/chrome@latest stop --all # skip if ensure reported "managed":false
注意事項
- ポートは常に
ensureで決まります。9222 をハードコードしないでください。 - CLI の終了コード 2 は、URL/対象が無効か、ページが読み込まれなかったことを示します。開発サーバーを確認してください。
<target>の名前が両方の実行で同じ対象に解決されるのは、スタッシュ/チェックアウト中にaccesslint.config.jsonが変わらない場合だけです。変更で設定に手を加える場合は、明示的な URL を渡してください。- スタッシュモード:
sleep 2でほとんどの HMR ケースに対応できます。ベースラインが現在の状態と同じに見える場合は、--wait-for "<selector>"を追加してください。 - ブランチモード:HMR は発生しません。CLI は実行ごとに新しいタブを開きます。
--wait-forが再ビルドの完了待ちに使われます。 - 実行間に DOM が大きく変わるとセレクターがずれるため、全体を確認するには
accesslint:scanで再実行してください。