「あらゆるラジオボタン・チェックボックスに label 要素をつけよう運動」を
今日から推進します。
たいていのブラウザにおいて、ラジオボタンやチェックボックスのサイズは非常に
小さいです。わずか数ドットしかない狭い領域をクリックしなきゃならないような
インタフェースは腐っています。このようなインタフェースを放置するのは利用者を
馬鹿にした行為といっても過言ではありません。
というわけで、label 要素をつければ入力が飛躍的に楽になります。
○ label 要素使用 (ラジオボタンx・チェックボックスx をクリックすると、対応するボタンにチェックが入る)
× 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 要素を
使用しているサービスもあれば、
使用していないサービスもあります。がんばりましょう。
参考:
フォームとアクセシビリティ
- http://68user.blog27.fc2.com/tb.php/10-c189e679
0件のトラックバック
アクセシビリティが向上するので、素晴らしいです。
ただ、個人的に思うのは、HTMLにFORM要素を入れた方々が、最初からそこまで考慮した設計をしていればよかったのでは、なんて思ってしまいますけれども。
先にも述べたようにlabel要素には大賛成なのですが、それを悪用したインタフェースを持つサイトが出てこないか、または、従来のインタフェースに慣れたユーザが間違ってチェックしてしまう・正しくチェックしたつもりがその直後に文字をクリックして違うところをチェックしてしまうのではなかろうか、などと、いらぬ心配をしてしまいました。
後者は、スタイルシートやJavaScriptなどとの併用で回避できるかもしれませんが、前者はどうにも・・・
・・・と、ケチばかりつけしまいましたが、どうかお気を悪くなされないよう、宜しくお願いいたします。