mcpField

A11y Audit Until Clean

おすすめ手動実行
コード品質最大 8 ラウンド

A11y Audit Until Clean について

変更した UI のアクセシビリティ問題を解消するためのループです。各ラウンドでアクセシビリティ監査を実行し、レポートに基づいてコードを修正します。最大 8 ラウンドまで行います。

主な機能

  1. 01手動トリガーで、開始のタイミングは利用者が決められる
  2. 02npm run test:a11y の終了コードで成否を判定
  3. 03最大 8 ラウンドで無限の再試行を防止
  4. 04現在は Cursor に対応

活用シーン

  1. 01UI の変更を含む PR を出す前
  2. 02新しいフォームやダイアログのコンポーネントを追加した後
  3. 03監査レポートの重大な違反を順に解消するとき
目標
変更した UI の重大なアクセシビリティ違反が 0 件で、監査コマンドで確認できる状態にします。
終了条件
npm run test:a11y が終了コード 0 で終わったとき、または 8 ラウンドで通らなかったときに停止します。
各ラウンドの間に実行
npm run test:a11y

起動プロンプト

Cursor に貼り付けて実行すると、終了条件を満たすまでエージェントが以下の手順を繰り返します。

prompt.md
「A11y Audit Until Clean」ループを開始します。
目標:変更した UI の重大なアクセシビリティ違反が 0 件で、監査コマンドで確認できる状態にします。
最大ラウンド数:8。
ステップ 1:a11y 監査を実行 — npm run test:a11y を実行し、報告された違反を読み取ります。終了コードが 0 なら合格とみなし、ループを終えます。 `npm run test:a11y`
ステップ 2:重大な違反を特定 — レポートから変更した UI に関わる重大な問題を選び、該当するコンポーネントや要素を突き止めます。
ステップ 3:コードを修正 — ラベルの追加、コントラストの調整、セマンティクスの修正など、問題ごとに最小限の変更を加えます。その後、次のラウンドで再び監査します。
各ラウンドの間に実行:`npm run test:a11y`
終了条件:npm run test:a11y が終了コード 0 で終わったとき、または 8 ラウンドで通らなかったときに停止します。

手順

各ラウンドは順番に実行され、終了条件を満たさなければ次のラウンドへ進みます(最大 8 ラウンド)。

01
a11y 監査を実行

npm run test:a11y を実行し、報告された違反を読み取ります。終了コードが 0 なら合格とみなし、ループを終えます。

$npm run test:a11y
02
重大な違反を特定

レポートから変更した UI に関わる重大な問題を選び、該当するコンポーネントや要素を突き止めます。

03
コードを修正

ラベルの追加、コントラストの調整、セマンティクスの修正など、問題ごとに最小限の変更を加えます。その後、次のラウンドで再び監査します。

未達 → 次のラウンド条件を満たせば終了

対応エージェント

この Loop をそのまま実行できるコーディングエージェントです。

Cursor
Claude Code

コメント