全日本ラジオボタンのラベルにクリック判定を付けろ協会
全日本ラジオボタンのラベルにクリック判定を付けろ協会 会長の id:mstssk です。
皆さんはチェックボックスやラジオボタンのラベル（キャプション）をクリックしても選択したことにならず憤慨したことはありませんか？
私はあります。
（追記）タイトルはラジオボタンなのに記事はチェックボックス主体で書いているのはただのミスです😇
よくないチェックボックス
Webサイトでこういうチェックボックスによる選択肢をよく見かけます。
選択肢1
選択肢2
<input type="checkbox"> 選択肢1 <input type="checkbox"> 選択肢2
そして大抵の場合、視覚的にチェックボックスと一体になっている「選択肢x」というラベルをクリックしても何も起きないということがよくあります。
こういう実装はアクセシビリティの問題があります。
まず、単純にチェックボックスを選択しづらいということ。
そして、チェックボックスとそのラベルの一体というセマンティクスをHTML上表現していないため、視覚障害者などの読み上げツールから適切に認識されません。
よいチェックボックス
チェックボックスとラベルのセットを表現するには<label>要素を使います。
HTMLだけで実現できます。
JavaScriptもCSSもいりません。
<input>要素を<label>要素でくくるだけでOKです。
<label><input type="checkbox"> ラベルをクリックしてもチェックできる</label>
<input>要素のclickイベントで何かしら処理を走らせている場合でも問題ありません。ラベル部分をクリックしても<input>要素のclickイベントは発火します。
デザインなどの都合により<label>要素でくくれない場合、for属性とid属性を使います。
<input type="checkbox" id="checkbox01"> <label for="checkbox01">ラベルをクリックしてもチェックできる</label>
チェックボックスだけでなくラジオボタンでも同じことができます。 いくつかのパターンを書いたサンプルページを用意しました。
