HTMLのlabel要素

HTMLのlabelを使うと、フォーム中の普通のテキストにチェックボックスやラジオボタン等のコントロールを関連づけて、テキスト部分がクリックされてもコントロールがクリックされたのと同じ動作をさせられる。

と書いてもわかりにくいので具体例を出すと、Googleの検索窓の下にある、「ウェブ全体から検索」「日本語のページを検索」を選ぶラジオボタンがそれ。けっこう前にこのGoogleの検索窓で気がついたが、最近はいろんなところで割と使われてるのが増えてきた。

チェックボックスで

□ ほげほげ

があったとき、ほげほげにlabel要素をつけると「ほげほげ」というテキスト部分もクリッカブルになる。
これ、クリックできる範囲が広くなるし、意味を示す言葉そのものをクリックできるのが直感的なので、もっとフツーに使われるようになったらいいのになあと。

<input id="hogehoge" name="hogehoge" type="checkbox"/><label for="hogehoge">ほげほげ</label>

と書く。

ちなみに

<label><input name="hogehoge" type="checkbox"/>ほげほげ</label>

という書き方もできて、こっちの方がシンプルで短いしidを考える必要もないので楽だと思うのだけど、ブラウザのサポートが低いのか今まで見たことはない。

調査したわけではないが他人がWebページをいじっているのを見ていると、テキスト部分をクリックする人はほとんどいなくて、□の部分までわざわざカーソルを持っていってクリックする人が圧倒的に多い。Webページの場合「ほげほげ」の部分はあくまでテキストであって、クリックできないことを経験的にわかっているからと思われる。
一方でOSやアプリケーションの設定パネルだったりすると、チェックボックス部分をわざわざ「ねらって」クリックする人のほうが少ない（ような気がする）。普通、クリックするとテキストに点線の枠が出てきてクリックできることがわかるし、さくっとテキストのところをクリックする人多いんじゃないかと。

本当ならWebでも、直接意味を示しているテキスト部分もクリックできた方が直感的。ちっちゃな□マークにカーソルを合わせるのを強要されるのはストレス。

作る側から見ても、コントロールごとにidを考える必要があるくらいで簡単だし、害もないからいいと思うのだけど。ここまでWebが浸透してるのだからこういう細かいユーザインタフェースの配慮があるのとないのとではけっこう違いが出てきそう。

最近はlabelの振ってあるページも多くなってきたけど、同じサイトの中でもページによってあったりなかったりする。これだと結局、最初から□をねらうほうが早いよ、みたいな状況になってる。