【HTML&CSS】【初心者向け】チェックボックス(ラジオボタン)とラベルの連動方法

1. label要素の役割

・フォームコントロールに、その内容を説明するラベル付けをする。
・フォームコントロールに紐づくラベルをブラウザにも明示する。

2. labelと要素の連動方法

① 要素のid属性とlabel要素のfor属性を同一にする

<input type="checkbox" id="shiba_dog"><label for="shiba_dog">柴犬</label>
<input type="checkbox" id="maltese"><label for="maltese">マルチーズ</label>
<input type="checkbox" id="corgi"><label for="corgi">コーギー</label>
<input type="checkbox" id="schnauzer"><label for="schnauzer">シュナウザー</label>
<input type="checkbox" id="bulldog"><label for="bulldog">ブルドッグ</label>

② label要素で紐づけ対象要素を囲う

<label><input type="checkbox">柴犬</label>
<label><input type="checkbox">マルチーズ</label>
<label><input type="checkbox">コーギー</label>
<label><input type="checkbox">シュナウザー</label>
<label><input type="checkbox">ブルドッグ</label>

3. 注意点

・labelは１つの要素としか紐づけられない

<input type="checkbox" id="shiba_dog">
<label for="shiba_dog">柴犬</label>

<input type="checkbox" id="kuro_shiba">
<label for="shiba_dog">黒柴</label>

4. labelと紐づけるメリット

・チェックボックスからテキストまでクリック範囲が広がることで
　押下しやすくなり、ユーザビリティが向上する
・スクリーンリーダでもチェックボックスに紐づくテキストが読み上げられる
　ため、内容が伝わりアクセシビリティが向上する