チェックボックスで <label>
タグを付けないとクリック範囲が狭まって不便です。<label>
タグでチェックボックスを囲めば記述がすっきりします。
常識なのかもしれませんが、自分はこれを知らなくて for
は必須だと思い込んでいたので、メモしておきます。
概要
チェックボックスの横に文字を書くだけだと、文字をクリックしても反応しません。
<input type="checkbox" />check1
※ 一昔前はこのような UI をよく見掛けました。
チェックボックスとラベルを関連付けるには、<input>
で id
属性を指定して、<label>
で for
属性を指定します。
<input type="checkbox" id="check2" /><label for="check2">check2</label>
チェックボックスを <label>
で囲めば、関連付けは明確となるため id
や for
属性は不要となります。
<label><input type="checkbox" />check3</label>
※ 一般的な運用(チェックボックスをスクリプトから参照する等)では id
属性が必要ですが、ここではクリックの連動だけを問題にしています。
See the Pen checkbox & label by 七誌 (@7shi) on CodePen.
参考
他の方法として、
<input>
を直接<label>
の内側に入れることができますが、この場合は関連付けが明確なので、for
およびid
属性は必要ありません。
経緯
自分のサイトを Edge の開発者ツールで見ると、アクセシビリティのエラーが出ていました。そこで「さらに読む」のリンクを見ると、例が示されていました。
The label can also be implicit by wrapping the element around the select:
<label>State: <select></select></label>
※ これは <select>
についての説明ですが、<input>
でも同様です。