ちょっと良いUIおれおれAdvent Calendar 2024 – 08日目

入力欄もだけど、特にチェックボックスとかは是非是非ラベルを付けてください。クリック可能な範囲が狭いと使いづらいじゃないですか。

デモ

入れ子で書くと楽

<label> は for 属性を用いて入力コントロールと紐づけられますが、対象のコントロールを入れ子にすることで省略できます。いちいち　id を管理しなくて良いので任意個のチェックボックスがあっても楽ちん。

for を使う例：

1
2
3
4
<input id="the-checkbox-1234" type="checkbox">
<label for="the-checkbox-1234">
  利用規約に同意する
</label>

入れ子にする例：

1
2
3
4
<label>
  <input type="checkbox">
  利用規約に同意する
</label>

おしまい

支援ツール向けのアクセシビリティのためにも付けるべきですが、普通のクリックやタップで操作する利用者にとっても便利です。実装コストはほぼゼロなのでどんどん付けてください。

参考