概要

チェックボックスの横に文字を書くだけだと、文字をクリックしても反応しません。

<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> でも同様です。