無精で短気で傲慢なプログラマ

UNIX や web やプログラムの技術的なことを中心に。

label 要素のススメ

「あらゆるラジオボタン・チェックボックスに 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 要素を使用しているサービスもあれば、
使用していないサービスもあります。がんばりましょう。


参考: フォームとアクセシビリティ
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する
 

心配性な私。

こういう方法もあるんですね。始めて知りました。
アクセシビリティが向上するので、素晴らしいです。
ただ、個人的に思うのは、HTMLにFORM要素を入れた方々が、最初からそこまで考慮した設計をしていればよかったのでは、なんて思ってしまいますけれども。
先にも述べたようにlabel要素には大賛成なのですが、それを悪用したインタフェースを持つサイトが出てこないか、または、従来のインタフェースに慣れたユーザが間違ってチェックしてしまう・正しくチェックしたつもりがその直後に文字をクリックして違うところをチェックしてしまうのではなかろうか、などと、いらぬ心配をしてしまいました。
後者は、スタイルシートやJavaScriptなどとの併用で回避できるかもしれませんが、前者はどうにも・・・
・・・と、ケチばかりつけしまいましたが、どうかお気を悪くなされないよう、宜しくお願いいたします。

へにか | URL | 2005-10-20(Thu)04:31 [編集]


> それを悪用したインタフェースを持つサイトが出てこないか

これはよくわかりませんが、適当に文字列をクリックすると、
「同意する」にチェックが入ってしまう、という話ですか?
そうであれば、Javascript で同様のことはできてしまうので、
label 要素の問題ではないような気がします。

> 従来のインタフェースに慣れたユーザが間違ってチェックしてしまう

> 正しくチェックしたつもりがその直後に文字をクリックして違うところを
> チェックしてしまう

これは同感です。

一番ダメなのが Firefox で、label 要素上にマウスポインタを置いても
画面上はまったく変化がありません。また、label 要素をクリックしても、
普通にラジオボタンやチェックボックスがチェックされるだけで、
ユーザへのフィードバックに乏しいです。これでは押下したことに
気づかない危険性はあります。

IE6 では、label 要素上にマウスポインタを置いても画面上は変化が
ありませんが、label 要素をクリックすると label 開始タグ~終了タグで
囲まれた部分に dotted な枠線が表示されます (コンパネ・インターネット
オプションと同じ UI)。これなら Firefox よりは気づきやすいでしょう。

とはいえ、Firefox の ツール->オプション はさらに一歩進んでいて、
label 要素的な文字列の上にマウスポインタを置くと、対応する
チェックボックスの色が変わります。

わたしとしては、label 要素の上にマウスポインタを置くと、
label 開始タグ~終了タグで囲まれた部分に dotted な下線が
付き、さらにチェックボックスの色が変わる、というくらいがよいと思います。

68user | URL | 2005-10-21(Fri)01:45 [編集]


> これはよくわかりませんが
これは、その後に仰っているとおりで、label要素の問題では無いですね。僕の早とちりでした。

> わたしとしては、label 要素の上にマウスポインタを置くと、
これ以下の文章について、同感です。

・・・といいつつ、HTMLで定義する際に、最初からinput要素を</input>必須にしておけば、label要素に頼らずに済むのにな、と、思っています。←先のコメントと重複しますが。
#hiddenは、どうすんの、ということはさておき。

へにか | URL | 2005-10-21(Fri)04:43 [編集]


> 最初からinput要素を</input>必須にしておけば、label要素に頼らずに済むのにな

なるほど、そうしておけば親切な UI が増えたかもしれませんね。ただ、label 要素がないと

<td><input id="c1" type="checkbox"></td> <td><label for="c1">ほげほげ</label></td>

というときにちょっと困りそうな気はします。

68user | URL | 2005-10-21(Fri)18:09 [編集]


> というときにちょっと困りそうな気はします。
うーん、確かにそういう需要はあると思いますので、仰るとおりだと思います。
ただ、テーブルの文字列を触ると、チェックボックスがActiveになる、と言うのは、「個人的に」気持ちが悪いと思います。これは構造の似ているリストの場合でも同様です。
とはいえ、テキストブラウザだと、仰るとおりのほうが扱いやすいとは思いますが。

#なんだか、場合わけをいっぱいやっているところがパズルみたいで、面白いですね。

以下、みもふたも無い話をします。お気を悪くなさらなければありがたいのですが。
>わずか数ドットしかない狭い領域
これは、大きければ問題ないわけで、Style Sheetを用いる、ということは考えられます。といいますか、それは各Web Browserの実装の問題なのでは・・・
#なんだか、これって、どこからか石を投げつけられそうな発言だなぁ。

へにか | URL | 2005-10-22(Sat)06:28 [編集]


> ただ、テーブルの文字列を触ると、チェックボックスがActiveになる、
> と言うのは、「個人的に」気持ちが悪いと思います。

前の例は
<table><tr><td><input type="radio" name="hoge3"></td><td>メール送信を希望する
(毎月1日に新製品情報を送付します)</td></tr>
<tr><td><input type="radio" name="hoge3"></td><td>メール送信を希望しない</td></tr></table>
というような整形のためのテーブルのつもりです (ここで TABLE 要素を使うのが適切なのか
知りませんが、わたしの技術では CSS で表現できないので)。

>> わずか数ドットしかない狭い領域
> これは、大きければ問題ないわけで、Style Sheetを用いる、ということは考えられます。
> といいますか、それは各Web Browserの実装の問題なのでは・・・
技術的にはそれで解決ですが、世の中の web サイトが CSS を使ってくれないと、
わたしが小さなラジオボタンを前にイライラする現実は変わりません。ユーザスタイル
シートを設定すれば解決するのかもしれませんが、会社と家×IE・Firefox の 4つ分
設定するのは面倒です。設定したとしても、出先では結局イライラすることになります。
最終的にはわたしがイライラしないことが目的ですので。

まぁ結局はこの問題に対するそれぞれの立ち位置の違いでしかないので、どの意見が
正しい・正しくない、ではないと考えます。

68user | URL | 2005-10-23(Sun)16:09 [編集]