label 要素のススメ

「あらゆるラジオボタン・チェックボックスに label 要素をつけよう運動」を
今日から推進します。

たいていのブラウザにおいて、ラジオボタンやチェックボックスのサイズは非常に
小さいです。わずか数ドットしかない狭い領域をクリックしなきゃならないような
インタフェースは腐っています。このようなインタフェースを放置するのは利用者を
馬鹿にした行為といっても過言ではありません。

というわけで、label 要素をつければ入力が飛躍的に楽になります。


○ label 要素使用 (ラジオボタンx・チェックボックスx をクリックすると、対応するボタンにチェックが入る)
ラジオボタン1
ラジオボタン2
ラジオボタン3
チェックボックス1
チェックボックス2

× label 要素未使用 (ラジオボタンx・チェックボックスx をクリックしても無反応)

ラジオボタン1
ラジオボタン2
ラジオボタン3
チェックボックス1
チェックボックス2

具体的には、以下のように input 要素に id を振ります。そして label for="対応するid" と
記述すれば OK です。なお、HTML 内で id の値は重複してはいけません (label 云々ではなく、
HTML の仕様)。

<input id="radio1" type="radio" name="hoge" value="1">
<label for="radio1">ラジオボタン1</label>
<input id="radio2" type="radio" name="hoge" value="2">
<label for="radio2">ラジオボタン2</label>
<input id="checkbox1" type="checkbox" name="hoge" value="1">
<label for="checkbox1">チェックボックス1</label>
<input id="checkbox2" type="checkbox" name="hoge" value="2">
<label for="checkbox2">チェックボックス2</label>

ちなみに google は、ほとんどのサービスにおいて label 要素を使用しており、
とても使いやすいです。Gmail を使っていると、ユーザインタフェースにここまで
こだわるか、と驚かされます。

Yahoo! Japan は、label 要素を使用しているサービスもあれば、
使用していないサービスもあります。がんばりましょう。


参考: フォームとアクセシビリティ