OK

• ✓input と文言を checkbox-label で囲み、ラベル全体を押せるようにする（キーボード・スクリーンリーダー対応もほぼ自動で得られる）。
• ✓中間状態は JS で el.indeterminate = true。
• ✓グループが複数あるときは fieldset/legend や Label Control の見出しで区切る。

NG

• ✕排他的な単一選択に使わない → radio。
• ✕形状を独自シェイプに変えない → □ が「複数選択可」の手がかり（guidelines 参照）。
• ✕ラベルを否定形で書かない（「メール通知を受け取らない」等） → チェックで二重否定になる。肯定形で書き、チェック＝有効に揃える。
• ✕チェックした瞬間に送信・保存を実行しない → 確定ボタンを挟む。
• ✕選択肢を横並びにしない → 縦に積む（flex-col / space-y-2）。視線が左右に飛び、選択肢同士の グルーピングが弱まり、追加・改行で崩れる。2 択でも縦。1 視線で上から下へ走査でき、増えても自然に伸びる。

<label class="checkbox-label"> でテキストごと包む。文字クリックでも切替でき、名前も自動で結び付く。

<label class="checkbox-label">
  <input type="checkbox" class="checkbox" />利用規約に同意する
</label>

input とテキストを別要素で並べない。文字クリックで切替できず、名前も結び付かない。

<input type="checkbox" class="checkbox" />
<span>利用規約に同意する</span>

チェックボックスは縦並びで配置する。1 視線で全選択肢を上から下へ走査でき、選択肢が増えても自然に拡張できる。

<div class="flex flex-col gap-2">
  <label class="checkbox-label">…</label>
</div>

チェックボックスを横並びで使用することは避けてください。視線が左右に飛び、選択肢同士のグルーピングが弱くなる上、選択肢の追加・改行で崩れやすくなります。

<div class="flex flex-wrap gap-6">
  <label class="checkbox-label">…</label>
</div>

境界色に加えエラーテキストを aria-describedby で関連付ける。色を認識できなくても理由が伝わる。

<label class="checkbox-label">
  <input class="checkbox checkbox-error"
    aria-invalid="true" aria-describedby="err" />同意する
</label>
<p id="err">同意が必要です</p>

赤い境界線だけでは、色を区別できない人にエラーだと伝わらない。

<label class="checkbox-label">
  <input class="checkbox checkbox-error" />同意する
</label>

fieldset ＋ legend でグループ名を与えると、SR が各項目を「通知の受け取り方」の一部として読む。

<fieldset>
  <legend>通知の受け取り方</legend>
  <label class="checkbox-label">…メール</label>
  <label class="checkbox-label">…SMS</label>
</fieldset>

見出しを <p> で置くだけでは、SR 上でグループとして関連付かない。

<p>通知の受け取り方</p>
<label class="checkbox-label">…メール</label>
<label class="checkbox-label">…SMS</label>